我有一个网站,有许多页面和不同的背景图片,我从CSS显示它们,像这样:
body.page-8 {
background: url("../img/pic.jpg") no-repeat scroll center top #000;
background-size: cover;
}
但是,我想在一个页面上使用<img>元素显示不同的(全屏)图片,并且我希望它们具有与上面的background-image相同的属性:cover;属性(图像不能显示从CSS,他们必须显示从HTML文档)。
通常我使用:
div.mydiv img {
width: 100%;
}
Or:
div.mydiv img {
width: auto;
}
使画面饱满,反应灵敏。然而,当屏幕变得太窄时,图片会收缩太多(宽度:100%),并在底部屏幕显示身体的背景色。另一种方法width: auto;只使图像完全大小,不响应屏幕大小。
是否有一种方法可以像background-size: cover那样显示图像?
我知道这是旧的,但是我上面看到的许多解决方案都有一个问题,图像/视频对于容器来说太大了,所以实际上不像背景大小的封面。然而,我决定创建“实用类”,这样它就可以用于图像和视频。你只需给容器一个类.media-cover-wrapper,给媒体项目本身一个类.media-cover
然后你就有了下面的jQuery:
function adjustDimensions(item, minW, minH, maxW, maxH) {
item.css({
minWidth: minW,
minHeight: minH,
maxWidth: maxW,
maxHeight: maxH
});
} // end function adjustDimensions
function mediaCoverBounds() {
var mediaCover = $('.media-cover');
mediaCover.each(function() {
adjustDimensions($(this), '', '', '', '');
var mediaWrapper = $(this).parent();
var mediaWrapperWidth = mediaWrapper.width();
var mediaWrapperHeight = mediaWrapper.height();
var mediaCoverWidth = $(this).width();
var mediaCoverHeight = $(this).height();
var maxCoverWidth;
var maxCoverHeight;
if (mediaCoverWidth > mediaWrapperWidth && mediaCoverHeight > mediaWrapperHeight) {
if (mediaWrapperHeight/mediaWrapperWidth > mediaCoverHeight/mediaCoverWidth) {
maxCoverWidth = '';
maxCoverHeight = '100%';
} else {
maxCoverWidth = '100%';
maxCoverHeight = '';
} // end if
adjustDimensions($(this), '', '', maxCoverWidth, maxCoverHeight);
} else {
adjustDimensions($(this), '100%', '100%', '', '');
} // end if
}); // end mediaCover.each
} // end function mediaCoverBounds
当调用它时,请确保注意页面大小的调整:
mediaCoverBounds();
$(window).on('resize', function(){
mediaCoverBounds();
});
然后下面的CSS:
.media-cover-wrapper {
position: relative;
overflow: hidden;
}
.media-cover-wrapper .media-cover {
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
是的,它可能需要jQuery,但它的响应相当好,行为完全像background-size: cover,你可以在图像和/或视频上使用它来获得额外的SEO价值。