À l'échelle de l'image de fond de sorte qu'il tient toujours ses proportions et reste centré

J'aimerais définir une page web image d'arrière-plan à l'échelle avec la fenêtre du navigateur de sorte qu'il ne perd jamais son aspect d'origine (qui devient tendu), et de sorte que l'image elle-même reste essentiellement centré. Après la fenêtre atteint une assez petite de taille, je veux de l'image à débordement (disparaître) sur les deux côtés gauche et droit, et pas seulement le côté droit, comme il le fait par défaut si l'image est en position absolue.

Voici un exemple de ce que je suis en train de faire maintenant: http://jsfiddle.net/S59EW/2/

#background img {
  position: absolute;
  min-height:100%;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
}

(L'image doit être à l'intérieur d'un div en position absolue en raison de peu de javascript que j'utilise qui s'y applique.)

Si vous redimensionnez le jsfiddle fenêtre, vous verrez que l'image conserve ses proportions que si vous ne faites pas trop la fenêtre de hauteur. Ensuite, l'image est étirée verticalement.

Et si vous supprimez "height: auto", vous obtenez la même chose, sauf que l'image cesse de redimensionnement après un certain point, et disparaît sur la droite/bas gauche /droite, mais pas sur le haut/la gauche.

#background img {
  position: absolute;
  min-height:100%;
  width: 100%;
  top: 0;
  left: 0;
}

Donc, j'ai besoin:

L'image d'arrière-plan à toujours occuper l'ensemble de la fenêtre sans les barres de défilement.
L'image de toujours garder le ratio d'aspect.
L'image de déborder sur le côté gauche et côté droit après un certain navigateur seuil de taille, de sorte qu'il reste essentiellement centré.

Merci à tous

InformationsquelleAutor user2985093 | 2013-11-13
  1. 5

    Vous pouvez définir la div arrière-plan par le biais de la CSS, de cette façon, l'image va remplir les div et les côtés de coupure lorsque la div est redimensionnée plus petits. Ce code permet de centrer l'image dans la div et le seuil de sur les bords lorsque rétrécie vers le bas:

    HTML:

    <div id="background"></div>

    CSS:

    #background {
    position: absolute;
    min-height:100%;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    background: url(http://2.bp.blogspot.com/-ayEwJpMGTPQ/USqliwPWo1I/AAAAAAAAHtI/ab6NHVy0Q48/s1600/tree.jpg) no-repeat center center;
    -webkit-background-size: cover; /* Add in these */
    -moz-background-size: cover;    /* four lines to */
    -o-background-size: cover;      /* remove the white space*/
    background-size: cover;         /* around images */
}

    JSFiddle

    et plein écran JSFiddle

    Mise à jour JSFiddle avec background-size de la propriété inclus pour supprimer l'espace blanc

    Mise à jour version plein écran

    Mise à jour avec le diaporama

    Mis à jour avec diaporama en plein écran

    Vous devrez peut-être jouer avec le ratio d'aspect de l'arrière-plan des photos afin d'obtenir le look que vous voulez.

    • C'est proche de ce que je veux. Mais quand vous étirez la fenêtre du navigateur pour une plus grande résolution horizontale de l'image elle-même, l'espace blanc apparaît sur les côtés gauche et droit. Aussi, j'ai plusieurs images de fond, le cyclisme, en fondu, qui est contrôlé par le javascript. Je ne crois pas que je peux encore le faire si j'ai mis le fond url via css. Est-il possible d'obtenir cet effet, sans réglage de la div bg image grâce à css?
    • Vous pouvez également utiliser background-images comme un diaporama. Vous serait tout simplement par le cycle de classes ou ids qui ont chaque image dans leur propre class/id.
    • Pour se débarrasser de l'espace blanc, vous pouvez ajouter background-size: cover; Cette propriété n'est pas prise en charge par défaut par tous les navigateurs, de sorte que vous devez ajouter des préfixes de navigateur. Vous pouvez utiliser cette propriété pour n'importe quel arrière-plan de l'image, indépendamment de sa taille d'origine. Pas sûr de ce que le JavaScript de votre aide pour le diaporama, mais cette propriété CSS doivent travailler pour un diaporama. Si vous souhaitez publier le JS, je peux voir comment le faire fonctionner. Je vais mettre à jour ma réponse avec une mise à jour de JSFiddle.
    • Salut Sean. Voici un violon indiquant ce que je fais maintenant (jsfiddle.net/MxvQz/1) -- évidemment, l'arrière-plan des techniques proposées ici n'ont pas été mises en œuvre, comme je n'ai pas le div bg image de l'ensemble grâce à css
    • J'ai ajouté un autre JSFiddle lien en bas de ma réponse avec votre code modifié pour fonctionner avec le plein écran des images de fond. Cela devrait travailler pour ce que vous essayez d'atteindre. Le meilleur de la chance.
    InformationsquelleAutor Sean Henderson
  2. 0

    J'ai ces deux options, l'une est CSS seule, mais elle aurait besoin d' media queries à une petite largeur.

    Ici est l'image de fond JSFIDDLE, dans celle-ci à l'échelle de exactement comment vous le voulez.

    Enfin, roulement de tambour s'il vous plaît, si vous avez besoin d'une image à une balise de son auto et à agir de cette façon, il y a bien une VIOLON pour que. :p

    Première CSS, 

    #background img {
  position: absolute;
  min-height:100%;
  width: 100%;
  height: auto;
  margin-top: -40%;
  top: 50%;
  left: 0;
}

@media only screen and (max-width: 1700px) {
  #background img {
    margin-top: 0;
    top: 0;
  }
}
    • L'image perd de son aspect ratio dans ces deux exemples. Il fonctionne essentiellement de la même façon que mon code initial n'.
    • Reportez-vous à mon premier lien pour 100% bon pour aller background-image, j'ai eu le mauvais lien. Le lien suivant sur mon grand écran est en train de faire ce que vous voulez qui est épique pour un img tag. Je suis en train d'essayer de le faire fonctionner pour les petites tailles, mais je vais vous laisser savoir.
    • Oui, que le premier lien c'est exactement ce dont j'ai besoin. Merci beaucoup, j'apprécie cela. Est-il possible que vous pourriez produire un violon indiquant comment je pourrais créer un diaporama de plusieurs images d'arrière-plan à l'aide de la classe/id de méthode vous référer ci-dessus, sans flash ou blanc/noir de l'espace entre les images d'arrière-plan? Je ne suis pas clair à propos de cette technique
    • Josh, pourriez-vous éditer votre premier violon à montrer comment modifier cette solution, à une ou deux images de plus plongé dans l'un de l'autre au bout de quelques secondes?
    • Voici un jsfiddle pour montrer comment faire cela dans un diaporama. Le jQuery, j'ai fourni n'est pas pour un diaporama, mais juste pour montrer l'effet. jsfiddle.net/S59EW/65
    • voici une autre de jouer avec toutes les images, jsfiddle.net/S59EW/68/show.

    InformationsquelleAutor Josh Powell