如果可以,请使用背景图像并进行设置background-size: cover
。这将使背景覆盖整个元素。
的CSS
div {
background-image: url(path/to/your/image.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
如果您坚持使用嵌入式图像,则有一些选择。首先,有
对象拟合
此属性作用于图像,视频和与相似的其他对象background-size: cover
。
的CSS
img {
object-fit: cover;
}
可悲的是,对于不支持IE 11的IE ,浏览器支持并不是那么好。下一个选项使用jQuery
CSS + jQuery
的HTML
<div>
<img src="image.png" class="cover-image">
</div>
的CSS
div {
height: 8em;
width: 15em;
}
自定义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);
像这样使用插件
jQuery('.cover-image').coverImage();
它将拍摄图像,将其设置为图像的包装元素上的背景图像,然后img
从文档中删除标签。最后,您可以使用
纯CSS
您可以将其用作备用。图像将按比例放大以覆盖其容器,但不会按比例缩小。
的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%);
}
希望对大家有帮助,编码愉快!