Image d'arrière-plan 100% largeur avec une hauteur 'auto'
Je travaille actuellement sur une page de destination mobile pour une entreprise. C'est une présentation très basique, mais en dessous de l'en-tête se trouve une image d'un produit qui aura toujours une largeur de 100% (le dessin montre qu'il passe toujours d'un bord à l'autre). En fonction de la largeur de l'écran, la hauteur de l'image sera évidemment ajustée en conséquence. À l’origine, j’ai fait cela avec un img (avec une largeur CSS de 100%) et cela a très bien fonctionné, mais j’ai bien compris que j’aimerais utiliser des requêtes de média pour servir des images différentes en fonction de résolutions différentes - disons petites, moyennes et grandes. une grande version de la même image, par exemple. Je sais que vous ne pouvez pas changer le fichier img src avec CSS, alors j’ai pensé que j’utiliserais un arrière-plan CSS pour l’image, par opposition à une balise img dans le code HTML.
Cela ne semble pas fonctionner correctement car la div avec l'image d'arrière-plan a besoin 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 et ensuite, je peux voir les 150px du haut de l'image, mais ce n'est pas la solution, il n'y a pas de hauteur fixe. J'ai eu une pièce de théâtre et j'ai constaté qu'une fois qu'il y avait une hauteur (testé avec 150px), je pouvais utiliser 'background-size: 100%' pour ajuster correctement l'image dans la div. Je peux utiliser le CSS3 le plus récent pour ce projet, car il ne vise que le mobile.
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 clarifier ma question.
<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 un pourcentage de hauteur basé sur la page entière ou est-ce que je regarde cela complètement faux?
Aussi, pensez-vous que les arrière-plans CSS sont le meilleur moyen de le faire? Peut-être existe-t-il une technique permettant d'utiliser différentes balises img en fonction de la largeur du périphérique/de l'écran. L'idée générale est que le modèle de page de destination sera utilisé de nombreuses fois avec différentes images de produit. 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 passe d'un projet à l'autre, 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-image, vous pouvez utiliser img directement et pour que l’image couvre toute la largeur de la fenêtre, utilisez max-width:100%; et rappelez-vous de ne pas appliquer de marge ni de marge à votre image. conteneur principal div 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 de format. Merci.
Éditer: Changer l'image en 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 changez votre image en différentes tailles 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 largeur variable et de hauteur différente réalisée avec CSS au lieu d'utiliser cover (qui permettra à l'image de s'étendre des côtés) ou contain (qui ne permet pas l'image à é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;
}
Cela définira votre image d'arrière-plan sur une largeur de 100% et permettra à la hauteur de déborder. Vous pouvez maintenant utiliser des requêtes multimédia pour échanger cette image au lieu de vous fier à JavaScript.
EDIT: Je viens de me rendre compte (3 mois plus tard) que vous ne voulez probablement pas que l’image déborde; il semble que vous souhaitiez que l'élément conteneur soit redimensionné en fonction de son image d'arrière-plan (afin de préserver ses proportions), 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'élément img. Si vous voulez utiliser les éléments img 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 de format constant en utilisant uniquement du CSS. Pour ce faire, définissez la height sur 0 et réglez le padding-bottom sur 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 formats, divisez la hauteur de l'image d'origine par sa propre largeur et multipliez-la 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.
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;
}
Vous pouvez utiliser la propriété CSS background-size et la définir sur cover ou contain, selon vos préférences. La couverture couvrira entièrement la fenêtre, tandis que l'option contiendra fera en sorte qu'un côté s'adapte à la fenêtre et ne couvre donc pas la totalité de la page (à moins que le rapport de format de l'écran 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. Sinon, vous pouvez utiliser 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 */
}
Il suffit d'utiliser une image de fond bicolore:
<div style="width:100%; background:url('images/bkgmid.png');
background-size: cover;">
content
</div>
Ajouter 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: étirement de 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 object-fit qui a support décent . Cela fonctionne de la même manière que background-size d'un div, mais sur l'élément lui-même et sur tout élément incluant les 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;
}