Se puder, use imagens de fundo e defina background-size: cover
. Isso fará com que o plano de fundo cubra todo o elemento.
CSS
div {
background-image: url(path/to/your/image.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
Se você está preso ao uso de imagens embutidas, existem algumas opções. Primeiro, existe
ajuste de objeto
Esta propriedade atua em imagens, vídeos e outros objetos semelhantes a background-size: cover
.
CSS
img {
object-fit: cover;
}
Infelizmente, o suporte ao navegador não é tão bom com o IE até a versão 11, não suportando nada. A próxima opção usa jQuery
CSS + jQuery
HTML
<div>
<img src="image.png" class="cover-image">
</div>
CSS
div {
height: 8em;
width: 15em;
}
Plug-in jQuery personalizado
(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);
Use o plugin como este
jQuery('.cover-image').coverImage();
Ele pega uma imagem, define-a como uma imagem de plano de fundo no elemento wrapper da imagem e remove a img
tag do documento. Por fim, você poderia usar
CSS puro
Você pode usar isso como um substituto. A imagem será ampliada para cobrir seu contêiner, mas não será reduzida.
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%);
}
Espero que isso ajude alguém, codificação feliz!