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

Je suis en train de mettre un site pour un ami à l'aide d'un vraiment agréable prime WordPress thème. J'ai payé pour le thème, mais le concepteur n'aura pas d'aide avec la personnalisation.

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

Toute aide serait la bienvenue car je suis un peu hors de ma profondeur.

OriginalL'auteur Andy Ashwin | 2013-07-18

  1. 5

    La façon la plus simple de traiter avec elle est d'insérer le logo de l'image intégrée plutôt que comme une image d'arrière-plan. De cette façon, vous pouvez appliquer le style CSS de 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;
}
    Grâce McNab! Cela prend tout son sens, même pour moi. Le problème c'est que c'est un WordPress eux donc je ne peux pas modifier le code html. C'est toute cette horrible php trucs je pense, même si je peux modifier le style.css
    Il suffit d'aller dans le thème et modifier header.php. Le code pour le logo est là, de le remplacer par ce que j'ai mis ci-dessus et retirez le style en ligne pour la #logo-contenant une image d'arrière-plan #logo-container a{background:url('http://www.zerocarbonfood.co.uk/test/wp-content/uploads/2013/07/wide-logo-2.png') no-repeat;}
    Assez sûr, j'ai fait tout cela, non, mais pas de joie. Merci infiniment pour vos efforts. Je suis sûr que vous avez raison et je suis en quelque sorte gâcher cette fin. Tout semble parfait partout ailleurs, il est encore juste que l'image est trop grande en mode portrait, sur mon iPad. Merde.

    OriginalL'auteur McNab

  2. 3

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

    Je ne trouve pas où changer cela, sauf dans le thème panneau de contrôle, et là il n'accepte que les px valeurs, pas de %. Je ne trouve pas le 922px arrière-plan-la valeur de taille dans le style.css donc je suppose qu'il doit être dans le php et je ne sais RIEN à propos de php... merci pour essayer de bien!
    Il aurait mais c'est une image d'arrière-plan, pas en ligne.

    OriginalL'auteur Juan Rangel

  3. 1

    Vous pouvez utiliser les supports suivants condition de css

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

    #header{
            width: 100%;
            height: auto;
            background-size: 100% auto !important;
    }
}
    Merci mais toujours pas de joie! Je l'ai essayé exactement comme vous l'avez là, et aussi avec #logo-conteneur au lieu de #header. J'ai collé au bas de la style.css.

    OriginalL'auteur Pankaj Sakariya

  4. 0

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

    Dans votre code HTML, vous pouvez essayer quelque chose comme

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

    Ce serait échelle avec la largeur de l'écran. Bien sûr, vous souhaitez mettre à l'échelle la hauteur ainsi pour conserver les proportions.

    Pour info, le site a l'air très bien sur mon téléphone Android lorsque je zoom sur tout le chemin.

    J'ai changé la largeur et la hauteur à 100% dans tous les cas de "logo-conteneur" que je peux trouver. Il ne fait aucune différence. Je pense que la référence à la réalité .fichier png est enterré dans php quelque part. Délicat.

    OriginalL'auteur Robert

  5. 0

    Essayer au style de l'image, pas le lien.

    logo-container img {
width: 100%;
height:auto;
}
    Je ne suis pas sûr que c'est vraiment une réponse à la question....

    OriginalL'auteur Kerry Townsend

  6. 0

    Essayer

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

    Il remplace la valeur précédente.

    OriginalL'auteur Hasan Zubairi