Ne peut pas obtenir de l'arrière-plan de l'en-tête de l'image pour l'ajuster à la largeur.. tout essayé

J'ai cherché pendant des heures et des heures et maintenant je me dis qu'il est temps pour moi de poser la question. Je ne peux pas obtenir mon image de fond qui est placé dans l'en-tête afin de l'adapter à l'écran. Il fonctionne pour tout type de résolution d'ordinateur très bien, mais où j'ai un problème c'est quand je suis visualisation sur un téléphone, il n'a pas à réduire. J'ai fait min-height, max-height, j'ai tout essayé, le problème est en partie, je pense, est que l'en-tête div en lui-même est plus petit que cette image, mais je ne sais pas vraiment besoin de conseils, je suis relativement nouveau dans le CSS de la scène.

Voici ce que j'ai:

#header {
    background-image: url('http://hamsoc.polymath.io/wp-content/uploads/2013/05/hamsocheader.png');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 209px;
}

Url de site web est http://hamsoc.polymath.io

Merci pour votre aide d'avance!

Duncan, Elle m'a donné la réponse et cela a fonctionné comme un charme. Voici ce qu'il a dit:

"Vous avez background-size: cover, qui est l'ajustement de la hauteur de la
image d'arrière-plan à la hauteur fixe de votre div, 209px. supprimer la
hauteur fixe et de le remplacer avec padding-bottom:15% ce sera la kep
ratio d'aspect de la div de la même et l'échelle de l'image en tant que fenêtre d'affichage obtient
les plus petits."

double possible de Étirement et de l'échelle de fond de CSS

OriginalL'auteur steveai | 2013-05-17

  1. 3

    Vous avez background-size: cover qui est l'ajustement de la hauteur de l'image d'arrière-plan à la hauteur fixe de votre div, 209px.

    supprimer la hauteur fixe et de le remplacer avec padding-bottom:15% cela permettra de garder le ratio d'aspect de la div de la même et l'échelle de l'image en tant que fenêtre devient plus petit.

    Qui a fait le tour! Merci beaucoup! Pouvez-vous expliquer comment cela fonctionne? Juste pour que je le sais pour référence future. Merci une tonne!
    En poussant la profondeur du récipient par un pourcentage de la largeur du corps signifie qu'il a toujours échelles dans le même rapport. jetez un oeil à FluidSquares.

    OriginalL'auteur Duncan Beattie

  2. 1

    Je vous suggérerais d'avoir l'image d'en-tête dans votre code HTML plutôt qu'une image d'arrière-plan et de définir ensuite un max-width comme suit:

    #header img{
    max-width: 100%;
    height: auto;
}

    Cela vous permettra également de faire de l'image "cliquable", ce qui est généralement recherché dans un en-tête logo.

    DÉMO VIOLON

    plein écran

    OriginalL'auteur Carrie Kendall

  3. 0

    Avez-vous utilisé l'un pourcentage de définir la hauteur de l'image dans la div?

    Afin de définir la hauteur de l'image à dire 100% de la div?

    Si non, alors vous pourriez peut-être utiliser un peu de code javascript pour détecter si elles sont sur un appareil mobile, et de régler la hauteur de conséquence?

    Les réponses ne se terminent généralement par des points d'interrogation.
    J'ai essayé de le mettre à 100% de la div, mais le problème de la div est tellement petit, j'ai donc besoin de définir la hauteur, en pixels, sinon il n'affiche pas l'image entière.

    OriginalL'auteur Callum

  4. 0

    La codés en dur hauteur de la valeur est la pagaille. Essayez de jouer avec le height: 290px valeur et de regarder l'en-tête correctement sur les petits écrans.

    Au lieu d'une image d'arrière-plan, vous pouvez essayer de mettre l'image dans le html et l'utilisation d'une propriété CSS à l'aide du contenu de l'échelle vers le bas sur les petits écrans.

    img {
    max-width: 100%;
}

    OriginalL'auteur Phil Sinatra