Image d'arrière-plan à 100% de largeur avec une hauteur `` automatique ''

Je travaille actuellement sur une page de destination mobile pour une entreprise. C'est une mise en page vraiment basique, mais sous l'en-tête, il y a une image d'un produit qui aura toujours une largeur de 100% (le design montre qu'il va toujours d'un bord à l'autre). En fonction de la largeur de l'écran, la hauteur de l'image s'ajustera évidemment en conséquence. Je l'ai fait à l'origine avec une img (avec une largeur CSS de 100%) et cela fonctionnait très bien, mais j'ai réalisé que j'aimerais utiliser des requêtes multimédias pour servir différentes images en fonction de différentes résolutions - disons un petit, moyen et une grande version de la même image, par exemple. Je sais que vous ne pouvez pas changer le src img avec CSS donc j'ai pensé que je devrais utiliser un arrière-plan CSS pour l'image par opposition à une balise img dans le HTML.

Je n'arrive pas à faire fonctionner cela 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 que dois-je utiliser pour la hauteur? Je peux mettre une hauteur fixe aléatoire comme 150px, puis 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. J'ai eu un jeu et j'ai trouvé qu'une fois qu'il y a une hauteur (testée avec 150px), je peux utiliser 'background-size: 100%' pour adapter correctement l'image dans le div. Je peux utiliser le CSS3 plus récent pour ce projet car il est uniquement destiné 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 peut-être donner au conteneur div une hauteur en pourcentage basée sur la page entière ou est-ce que je regarde cela complètement faux?

De plus, pensez-vous que les arrière-plans CSS sont le meilleur moyen de le faire? Il existe peut-être une technique qui sert différentes balises img en fonction de la largeur de l'appareil / de l'écran. L'idée générale est que le modèle de page de destination sera utilisé plusieurs fois avec différentes images de produits, je dois donc m'assurer de le développer de la meilleure façon possible.

Je m'excuse, c'est un peu long, mais je vais et vient de ce projet au suivant, alors j'aimerais que cette petite chose soit faite. Merci d'avance pour votre temps, c'est très apprécié. Cordialement

Au lieu d'utiliser, background-imagevous pouvez utiliser imgdirectement et pour que l'image s'étale sur toute la largeur de la fenêtre, essayez d'utiliser max-width:100%;et rappelez-vous de ne pas appliquer de rembourrage ou de marge à votre div de conteneur principal car ils augmenteront 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 hauteur / largeur. Merci.

Edit: Changer l'image sur une taille différente 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 dans une taille différente du navigateur.

Tim S. était beaucoup plus proche d'une réponse «correcte» que celle actuellement acceptée. Si vous voulez avoir une image d'arrière-plan de 100% de largeur et de hauteur variable réalisée avec CSS, au lieu d'utiliser cover(qui permettra à l'image de s'étendre sur les côtés) ou contain(qui ne permet pas du tout à l'image de s'étendre), il suffit définissez le CSS comme ceci:

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

Cela définira votre image d'arrière-plan sur une largeur de 100% et permettra à la hauteur de déborder. Vous pouvez désormais utiliser des requêtes multimédias pour échanger 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 hauteur / largeur), ce qui n'est pas possible avec CSS pour autant que je sache.

J'espère que vous pourrez bientôt utiliser le nouvel attribut srcset sur l' imgélément. Si vous souhaitez utiliser des imgéléments maintenant, la réponse actuellement acceptée est probablement la meilleure.

Cependant, vous pouvez créer un élément d'image d'arrière-plan réactif avec un rapport hauteur / largeur constant en utilisant purement CSS. Pour ce faire, définissez le heightsur 0 et définissez le padding-bottomsur un pourcentage de la propre 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 hauteur / largeur, divisez la hauteur de l'image d'origine par sa propre largeur et multipliez par 100 pour obtenir la valeur en pourcentage. Cela fonctionne car le pourcentage de remplissage est toujours calculé en fonction de la largeur, même s'il s'agit d'un remplissage vertical.

Essaye ça

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;
}

Vous pouvez utiliser la propriété CSS background-sizeet la définir sur coverou contain, selon vos préférences. La couverture couvrira entièrement la fenêtre, tandis que contenir fera en sorte qu'un côté s'adapte à la fenêtre, ne couvrant ainsi pas toute la page (à moins que le rapport hauteur / largeur de l'écran ne soit égal à l'image).

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

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

Utilisez simplement une image d'arrière-plan à deux couleurs:

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

Ajoutez le css:

   html,body{
        height:100%;
        }
    .bg-img {
        background: url(image.jpg) no-repeat center top; 
        background-size: cover; 
        height:100%;     
    }

Et html c'est:

<div class="bg-mg"></div>

CSS: étirer l'image d'arrière-plan à 100% de la largeur et de la hauteur de l'écran?

Nous sommes en 2017 et vous pouvez maintenant utiliser la fonction object-fit qui a un support décent . Il fonctionne de la même manière qu'un div background-sizemais sur l'élément lui-même, et sur tout élément comprenant des images.

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}