Si vous le pouvez, utilisez des images d'arrière-plan et définissez background-size: cover
. L'arrière-plan couvrira ainsi l'ensemble de l'élément.
CSS
div {
background-image: url(path/to/your/image.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
Si vous êtes obligé d'utiliser des images en ligne, il existe quelques options. Tout d'abord, il y a
Ajustement de l'objet
Cette propriété agit sur les images, les vidéos et les autres objets similaires à background-size: cover
.
CSS
img {
object-fit: cover;
}
Tristement, support du navigateur n'est pas très bonne, IE jusqu'à la version 11 ne la prenant pas du tout en charge. L'option suivante utilise jQuery
CSS + jQuery
HTML
<div>
<img src="image.png" class="cover-image">
</div>
CSS
div {
height: 8em;
width: 15em;
}
Sur mesure plugin jQuery
(function ($) {
$.fn.coverImage = function(contain) {
this.each(function() {
var $this = $(this),
src = $this.get(0).src,
$wrapper = $this.parent();
if (contain) {
$wrapper.css({
'background': 'url(' + src + ') 50% 50%/contain no-repeat'
});
} else {
$wrapper.css({
'background': 'url(' + src + ') 50% 50%/cover no-repeat'
});
}
$this.remove();
});
return this;
};
})(jQuery);
Utilisez le plugin comme suit
jQuery('.cover-image').coverImage();
Il prend une image, la définit comme image d'arrière-plan sur l'élément enveloppant de l'image et supprime l'élément img
du document. Enfin, vous pouvez utiliser
CSS pur
Vous pouvez l'utiliser comme solution de repli. L'image sera agrandie pour couvrir son conteneur, mais elle ne sera pas réduite.
CSS
div {
height: 8em;
width: 15em;
overflow: hidden;
}
div img {
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
max-width: none;
max-height: none;
display: block;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
J'espère que cela pourra aider quelqu'un, bon codage !
2 votes
Si vous avez besoin que l'image soit remplie en hauteur ou en largeur aux dimensions correspondantes de la div, je ne peux que penser à utiliser javascript. Est-ce quelque chose que vous souhaitez explorer ?
1 votes
En rapport : stackoverflow.com/questions/787839/
2 votes
La réponse est
object-fit
voir (et upvote) @daniels ci-dessous1 votes
@aexl Merci de m'avoir alerté sur ce point. Cette question date de 11,5 ans et j'ai accepté cette réponse le jour même. XD J'ai sélectionné une autre réponse, qui semble plus pertinente que celle que vous avez mentionnée. Faites-moi savoir si vous n'êtes pas d'accord. En fait, je ne suis pas un développeur web, je ne fais que du C++, donc je ne sais pas trop comment choisir la meilleure réponse ici.