我有一个网站,有许多页面和不同的背景图片,我从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那样显示图像?


当前回答

尝试同时设置min-height和min-width,使用display:block:

img {
    display:block;
    min-height:100%;
    min-width:100%;
}

(小提琴)

如果你的图像的包含元素是position:relative或position:absolute,图像将覆盖容器。然而,它不会集中。

如果你知道它是水平溢出(设置margin-left:-50%)还是垂直溢出(设置margin-top:-50%),你可以很容易地将图像居中。可以使用CSS媒体查询(和一些数学)来解决这个问题。

其他回答

background:url('/image/url/') right top scroll; 
background-size: auto 100%; 
min-height:100%;

遇到完全相同的症状。以上对我来说很管用。

我不允许'添加一个评论'这样做,但是的,什么Eru Penkman做的是相当到位,让它像背景覆盖所有你需要做的就是改变

.tall-img { margin-top: -50%; 宽度:100%; } .wide-img { margin-left: -50%; 高度:100%; }

TO

.wide-img { margin-left: -42%; 高度:100%; } .tall-img { margin-top: -42%; 宽度:100%; }

我知道这是旧的,但是我上面看到的许多解决方案都有一个问题,图像/视频对于容器来说太大了,所以实际上不像背景大小的封面。然而,我决定创建“实用类”,这样它就可以用于图像和视频。你只需给容器一个类.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价值。

假设您可以安排一个希望填充的容器元素,这似乎是可行的,但感觉有点笨拙。本质上,我只是在更大的区域上使用min/max-width/height,然后将该区域缩小到原始尺寸。

.container { width: 800px; height: 300px; border: 1px solid black; overflow:hidden; position:relative; } .container.contain img { position: absolute; left:-10000%; right: -10000%; top: -10000%; bottom: -10000%; margin: auto auto; max-width: 10%; max-height: 10%; -webkit-transform:scale(10); transform: scale(10); } .container.cover img { position: absolute; left:-10000%; right: -10000%; top: -10000%; bottom: -10000%; margin: auto auto; min-width: 1000%; min-height: 1000%; -webkit-transform:scale(0.1); transform: scale(0.1); } <h1>contain</h1> <div class="container contain"> <img src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" /> <!-- 366x200 --> </div> <h1>cover</h1> <div class="container cover"> <img src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" /> <!-- 366x200 --> </div>

我们可以采用ZOOM方法。我们可以假设,如果方面图像的高度或宽度小于所需的高度或宽度,最大30%(或更高至100%)可以是缩放效果。我们可以用overflow: hidden隐藏其他不需要的区域。

.image-container {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.stage-image-gallery a img {
  max-height: 130%;
  max-width: 130%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

这将调整不同宽度或高度的图像。