Image d'arrière-plan de 100% de largeur avec une hauteur "auto".

Question

Je travaille actuellement sur une page d'accueil mobile pour une entreprise. Il s'agit d'une mise en page très basique, mais sous l'en-tête se trouve l'image d'un produit qui aura toujours une largeur de 100% (le design montre qu'elle va toujours de bord à bord). En fonction de la largeur de l'écran, la hauteur de l'image s'adaptera évidemment en conséquence. À l'origine, j'ai utilisé un img (avec une largeur CSS de 100 %) et cela a très bien fonctionné, mais j'ai réalisé que j'aimerais utiliser des requêtes média pour afficher différentes images en fonction des résolutions - disons une petite, une moyenne et une grande version de la même image, par exemple. Je sais qu'il n'est pas possible de modifier le src de l'image avec CSS. Je me suis donc dit que je devais utiliser un arrière-plan CSS pour l'image plutôt qu'une balise img dans le code HTML.

Je n'arrive pas à le faire fonctionner correctement car le div avec l'image d'arrière-plan a besoin à la fois d'une largeur et d'une hauteur pour afficher l'arrière-plan. Je peux évidemment utiliser 'width : 100%' mais qu'est-ce que je dois utiliser pour la hauteur ? Je peux mettre une hauteur fixe aléatoire comme 150px et alors je peux voir les 150px supérieurs de l'image mais ce n'est pas la solution car il n'y a pas de hauteur fixe. Je me suis amusé et j'ai découvert qu'une fois qu'il y a une hauteur (testée avec 150px), je peux utiliser 'background-size : 100%' pour faire tenir l'image dans le div correctement. Je peux utiliser les CSS3 les plus récents pour ce projet, car il est destiné uniquement aux mobiles.

J'ai ajouté un exemple approximatif ci-dessous. Veuillez excuser les styles en ligne mais je voulais donner un exemple de base pour essayer de rendre ma question un peu plus claire.

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

Dois-je donner à la division conteneur un pourcentage de hauteur basé sur l'ensemble de la page ou est-ce que je me trompe complètement ?

Par ailleurs, pensez-vous que les arrière-plans CSS soient la meilleure façon de procéder ? Il existe peut-être une technique qui permet d'utiliser différentes balises img en fonction de la largeur de l'appareil ou de l'écran. L'idée générale est que le modèle de page d'accueil sera utilisé de nombreuses fois avec différentes images de produits. Je dois donc m'assurer que je le développe de la meilleure façon possible.

Je m'excuse si c'est un peu long, mais je suis en train de passer d'un projet à l'autre et j'aimerais que cette petite chose soit faite. Merci d'avance pour votre temps, c'est très apprécié. Salutations

Answer 1

Tim S. était beaucoup plus proche d'une réponse "correcte" que de la réponse actuellement acceptée. Si vous souhaitez obtenir une image d'arrière-plan d'une largeur de 100 % et d'une hauteur variable à l'aide de CSS, au lieu d'utiliser cover (ce qui permettra à l'image de s'étendre sur les côtés) ou contain (qui ne permet pas à l'image de s'étendre du tout), il suffit de définir le CSS comme suit :

body {
    background-image: url(img.jpg);
    background-position: center top;
    background-size: 100% auto;
}

L'image d'arrière-plan aura une largeur de 100 % et la hauteur débordera. Vous pouvez maintenant utiliser des requêtes média pour remplacer cette image au lieu de vous fier à JavaScript.

EDIT : Je viens de réaliser (3 mois plus tard) que vous ne voulez probablement pas que l'image déborde ; vous semblez vouloir que l'élément conteneur soit redimensionné en fonction de son image d'arrière-plan (pour préserver son rapport d'aspect), ce qui n'est pas possible avec CSS pour autant que je sache.

Avec un peu de chance, vous pourrez bientôt utiliser la nouvelle srcset de l'attribut img élément. Si vous voulez utiliser img éléments maintenant, la réponse actuellement acceptée est probablement la meilleure.

Toutefois, vous pouvez créer un élément d'image d'arrière-plan réactif avec un rapport d'aspect constant en utilisant uniquement CSS. Pour ce faire, vous devez définir l'attribut height à 0 et mettre le padding-bottom à un pourcentage de la largeur de l'élément, comme suit :

.foo {
    height: 0;
    padding: 0; /* remove any pre-existing padding, just in case */
    padding-bottom: 75%; /* for a 4:3 aspect ratio */
    background-image: url(foo.png);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

Pour utiliser différents rapports d'aspect, divisez la hauteur de l'image originale par sa propre largeur, et multipliez par 100 pour obtenir la valeur en pourcentage. Cela fonctionne parce que le pourcentage de remplissage est toujours calculé en fonction de la largeur, même s'il s'agit d'un remplissage vertical.

Answer 2

Au lieu d'utiliser background-image vous pouvez utiliser img directement et pour que l'image s'étende sur toute la largeur de la fenêtre, essayez d'utiliser max-width:100%; N'oubliez pas de ne pas appliquer de padding ou de marge à la division principale du conteneur, car cela augmenterait la largeur totale du conteneur. En utilisant cette règle, vous pouvez avoir une largeur d'image égale à la largeur du navigateur et la hauteur changera également en fonction du rapport d'aspect. Merci.

Editer : Changer l'image sur différentes tailles de la fenêtre

$(window).resize(function(){
  var windowWidth = $(window).width();
  var imgSrc = $('#image');
  if(windowWidth <= 400){           
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
  }
  else if(windowWidth > 400){
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
  <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>

De cette façon, vous modifiez votre image en fonction de la taille du navigateur.

Answer 3

Essayez ceci

html { 
  background: url(image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

Version simplifiée

html {
  background: url(image.jpg) center center / cover no-repeat fixed;
}

Answer 4

Vous pouvez utiliser la propriété CSS background-size et le régler sur cover o contain selon vos préférences. Couvrir couvrira entièrement la fenêtre, tandis que contenir fera en sorte qu'un côté s'adapte à la fenêtre et ne couvrira donc pas la page entière (à moins que le rapport d'aspect de l'écran soit égal à l'image).

Veuillez noter qu'il s'agit d'une propriété CSS3. Dans les navigateurs plus anciens, cette propriété est ignorée. Vous pouvez également utiliser le javascript pour modifier les paramètres CSS en fonction de la taille de la fenêtre, mais cela n'est pas recommandé.

body {
    background-image: url(image.jpg); /* image */
    background-position: center;      /* center the image */
    background-size: cover;           /* cover the entire window */
}

Answer 5

Il suffit d'utiliser une image de fond en deux couleurs :

<div style="width:100%; background:url('images/bkgmid.png');
       background-size: cover;">
content
</div>