代码之家 › 专栏 › 技术社区 › DCR

获取图像以填充容器,隐藏溢出[重复]

containers image css

DCR · 技术社区 · 3 年前

我有一个网站有很多页面和不同的背景图片,我用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%;
}

或者:

div.mydiv img {
    width: auto;
}

使图片完整且反应灵敏。然而,画面缩小了太多( width: 100% )当屏幕变得太窄时,会在底部屏幕中显示身体的背景颜色。另一种方法, width: auto; ,仅使图像变为全尺寸,不响应屏幕尺寸。

是否有方法以相同的方式显示图像 background-size: cover 做?

0 回复 | 直到 6 年前

515

Andy 2 年前

解决方案#1- object-fit property ( Lacks IE support )

刚刚设置 object-fit: cover; 在img上。

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}

<img src="https://loremflickr.com/1500/1000" alt="A random image from Flickr" />

请参阅 MDN -关于 object-fit: cover :

被替换的内容的大小应保持其纵横比,同时填充整个内容框中的元素。如果对象的纵横比如果其长方体的纵横比不匹配,则对象将剪裁合身。

为了 object-fit: contain :

替换的内容被缩放以保持其纵横比,同时适合元素内容框。整个对象被制作成填充盒子,同时保持其纵横比,因此如果其纵横比与盒子的纵横比不匹配,则对象将被“信箱”。

另请参见 this Codepen demo 其比较 对象拟合:封面 应用于图像 background-size: cover 应用于背景图像

解决方案#2-用css背景图像替换img

body {
  margin: 0;
}

img {
  position: fixed;
  width: 0;
  height: 0;
  padding: 50vh 50vw;
  background: url("https://loremflickr.com/1500/1000") no-repeat;
  background-size: cover;
}

<img src="https://via.placeholder.com/1500x1000" alt="A random image from Flickr" />

Ulrich Schwarz 9 年前

假设你可以安排一个你想填充的容器元素,这似乎是可行的,但感觉有点老套。本质上,我只是使用 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>

Seimen 9 年前

其实有一个相当简单的 css solution 它甚至适用于IE8:

.container {
  position: relative;
  overflow: hidden;
  /* Width and height can be anything. */
  width: 50vw;
  height: 50vh;
}

img {
  position: absolute;
  /* Position the image in the middle of its container. */
  top: -9999px;
  right: -9999px;
  bottom: -9999px;
  left: -9999px;
  margin: auto;
  /* The following values determine the exact image behaviour. */
  /* You can simulate background-size: cover/contain/etc.
     by changing between min/max/standard width/height values.
     These values simulate background-size: cover
  */
  min-width: 100%;
  min-height: 100%;
}

<div class="container">
    <img src="http://placehold.it/200x200" alt="" />
</div>

Thiago Barcala 6 年前

我找到了一个简单的解决方案来模拟cover和contain,它是纯CSS,适用于具有动态维度的容器,并且对图像比例也没有任何限制。

请注意,如果你不需要支持IE或16之前的Edge,那么你最好使用对象拟合。

背景大小:封面

.img-container {
  position: relative;
  overflow: hidden;
}

.background-image {
  position: absolute;
  min-width: 1000%;
  min-height: 1000%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0.1);
  z-index: -1;
}

<div class="img-container">
  <img class="background-image" src="https://picsum.photos/1024/768/?random">
  <p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

这里使用1000%,以防图像的自然大小大于其显示的大小。例如,如果图像是500x500,但容器只有200x200。使用此解决方案,图像将被调整为2000x2000(由于最小宽度/最小高度),然后缩小到200x200(由于 transform: scale(0.1) ).

x10因子可以用x100或x1000代替,但在20x20 div上渲染2000x2000图像通常并不理想:)

背景大小:包含

遵循同样的原则,您也可以使用它来模拟 background-size: contain :

.img-container {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.background-image {
  position: absolute;
  max-width: 10%;
  max-height: 10%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(10);
  z-index: -1;
}

<div style="background-color: black">
  <div class="img-container">
    <img class="background-image" src="https://picsum.photos/1024/768/?random">
    <p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

Adam Azad 8 年前

不 ,你无法完全理解 background-size:cover 但是。。

这种方法非常接近:它使用JavaScript来确定图像是横向还是纵向,并相应地应用样式。

 $('.myImages img').load(function(){
        var height = $(this).height();
        var width = $(this).width();
        console.log('widthandheight:',width,height);
        if(width>height){
            $(this).addClass('wide-img');
        }else{
            $(this).addClass('tall-img');
        }
    });

CSS

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

http://jsfiddle.net/b3PbT/

Charlie Tupman 9 年前

你可以做的是使用“style”属性将背景图像添加到元素中,这样你仍然可以在HTML中调用图像,但你仍然可以使用background-size:cover-css行为:

HTML:

    <div class="image-div" style="background-image:url(yourimage.jpg)">
    </div>

CSS:

    .image-div{
    background-size: cover;
    }

这就是我如何将背景大小:覆盖行为添加到需要动态加载到HTML中的元素中。然后,您可以使用很棒的css类,如background position:center。繁荣

Gus 8 年前

我需要效仿 background-size: contain ,但无法使用 object-fit 由于缺乏支持。我的图像有具有定义尺寸的容器,这最终对我有效:

.image-container {
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: rebeccapurple;
  border: 1px solid yellow;
  position: relative;
}

.image {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

<!-- wide -->
<div class="image-container">
  <img class="image" src="http://placehold.it/300x100">
</div>

<!-- tall -->
<div class="image-container">
  <img class="image" src="http://placehold.it/100x300">
</div>

mems 9 年前

使用CSS,您可以模拟 object-fit: [cover|contain]; 这是有用的 transform 和 [max|min]-[width|height] . 这并不完美。 这在一种情况下不起作用:如果图像比容器更宽更短。

.img-ctr{
  background: red;/*visible only in contain mode*/
  border: 1px solid black;
  height: 300px;
  width: 600px;
  overflow: hidden;
  position: relative;
  display: block;
}
.img{
  display: block;

  /*contain:*/
  /*max-height: 100%;
  max-width: 100%;*/
  /*--*/

  /*cover (not work for images wider and shorter than the container):*/
  min-height: 100%;
  width: 100%;
  /*--*/

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<p>Large square:
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x1000"></span>
</p>
<p>Small square:
<span class="img-ctr"><img class="img" src="http://placehold.it/100x100"></span>
</p>
<p>Large landscape:
<span class="img-ctr"><img class="img" src="http://placehold.it/2000x1000"></span>
</p>
<p>Small landscape:
<span class="img-ctr"><img class="img" src="http://placehold.it/200x100"></span>
</p>
<p>Large portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x2000"></span>
</p>
<p>Small portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/100x200"></span>
</p>
<p>Ultra thin portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/200x1000"></span>
</p>
<p>Ultra wide landscape (images wider and shorter than the container):
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x200"></span>
</p>

Rehmat 7 年前

我们可以采用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%);
}

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

Jeremy 11 年前

尝试设置 二者都 min-height 和 min-width ,与 display:block :

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

( fiddle )

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

如果知道图像是否会水平溢出(设置 margin-left:-50% )或垂直(设置 margin-top:-50% ). 也许可以使用CSS媒体查询(和一些数学)来解决这个问题。

Asim Ramay 10 年前

我不允许“添加评论”这样做,但是的,Eru Penkman所做的几乎是准确的,要让它像背景封面一样,你所需要做的就是改变

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

.wide-img{
    margin-left:-42%;
    height:100%;
}
.tall-img{
    margin-top:-42%;
    width:100%;
}

Secular12 7 年前

我知道这是旧的,但我上面看到的许多解决方案都有一个问题,即图像/视频对于容器来说太大,所以实际上不像背景大小的盖子。然而,我决定制作“实用类”,这样它就可以用于图像和视频。您只需为容器指定class.media封面包装,为媒体项本身指定class.mediacover

然后你有以下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,但它的响应非常好,行为与背景大小完全一样:封面,你可以在图像和/或视频上使用它来获得额外的SEO价值。

-1

ÑÑÐ¼ÑÑÐ¾Ð½Ð¾Ðº 2 年前

对于IE6,您还需要包括第二行宽度:100%;

.mydiv img {
    max-width: 100%;
    width: 100%;
}

-2

user2958520 11 年前

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

遇到了完全相同的症状。上面为我工作。