web-dev-qa-db-fra.com

Comment puis-je rendre mon image d'en-tête correctement sensible?

J'essaye de créer un site pour un ami en utilisant un thème Wordpress premium vraiment sympa. J'ai payé le thème, mais le concepteur ne m'aidera pas avec la personnalisation. 

Le site est actuellement sur www.zerocarbonfood.co.uk/test/ . À l’origine, le thème avait un petit logo aligné à gauche, mais mon ami (e) préfère ce grand logo, qui, à mon avis, fonctionne mieux. Le problème, c’est que maintenant que je le regarde sur un iPad ou un iPhone (portrait), le logo est trop gros et que je le vis. Dans les options de thème, il est défini comme une largeur de 922px et une hauteur de 168px. Je ne peux pas y mettre une valeur en pourcentage. Puis-je remplacer cela en CSS quelque part?

Toute aide serait reçue avec gratitude car je suis un peu hors de ma profondeur.

csswordpressresponsive-design
5
Andy Ashwin

Le moyen le plus simple consiste à insérer l'image du logo en ligne plutôt que sous forme d'image d'arrière-plan. De cette façon, vous pouvez appliquer CSS à l'élément img lui-même;

HTML

<div id="logo-container"><a href="http://www.zerocarbonfood.co.uk/test"><img src="http://www.zerocarbonfood.co.uk/test/wp-content/uploads/2013/07/wide-logo-2.png" alt="" /></a></div>

CSS

#logo-container img {
   width: 100%;
   height: auto;
}
5
McNab

essayez d'utiliser max-width: 100%; height: auto;, cela devrait redimensionner l'image correctement.

3
Juan Rangel

Essayez de styliser l'image, pas le lien.

logo-container img {
width: 100%;
height:auto;
}
0
Kerry Townsend

Essayer

#logo-container img {
   width: 100%; !important
   height: auto; !important
}

Cela écrasera les valeurs précédentes.

0
Hasan Zubairi

Essayez d’utiliser% au lieu de px. De cette façon, votre image sera mise à l'échelle avec la taille de la page.

Dans votre code HTML, vous pouvez essayer quelque chose comme

<img src="logo.png" width="80%" height="80%"/>

Cela permettrait d'échelonner avec la largeur de l'écran. Bien entendu, vous souhaitez également redimensionner la hauteur pour préserver les proportions.

Pour votre information, le site a l'air bien sur mon téléphone Android quand je fais un zoom arrière.

0
Robert

Vous pouvez utiliser la condition de média suivante dans css

 /* Resize Background*/
@media only screen and (max-width: 800px) {

    #header{
            width: 100%;
            height: auto;
            background-size: 100% auto !important;
    }
}
0
Pankaj Sakariya