Si vous le pouvez, utilisez des images d'arrière-plan et définissez background-size: cover
. Cela fera que l'arrière-plan couvrira tout 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 coincé avec l'utilisation d'images en ligne, il existe quelques options. Tout d'abord, il y a
ajustement aux objets
Cette propriété agit sur les images, vidéos et autres objets similaires à background-size: cover
.
CSS
img {
object-fit: cover;
}
Malheureusement, la prise en charge du navigateur n'est pas terrible avec IE jusqu'à la version 11 qui ne la prend pas en charge du tout. L'option suivante utilise jQuery
CSS + jQuery
HTML
<div>
<img src="image.png" class="cover-image">
</div>
CSS
div {
height: 8em;
width: 15em;
}
Douane 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 celui-ci
jQuery('.cover-image').coverImage();
Il prendra une image, la définira comme image d'arrière-plan sur l'élément wrapper de l'image et supprimera le img
balise du document. Enfin, vous pouvez utiliser
CSS pur
Vous pouvez l'utiliser comme solution de rechange. L'image s'agrandira pour couvrir son conteneur, mais elle ne diminuera pas.
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 pourrait aider quelqu'un, codage heureux!