是否有等效于background-size的图像元素：Cover和Contain？

西门2020-04-03

我有一个包含许多页面和不同背景图片的网站，并且通过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;
}

to make the picture full and responsive. However the picture shrinks too much (width: 100%) when the screen gets too narrow, and shows the body's background-color in the bottom screen. The other method, width: auto;, only makes the image full size and does not respond to the screen size.

Is there a way to display the image the same way that background-size: cover does?

米亚2020/04/03 11:50:46

我们可以采用ZOOM方法。我们可以假设，如果宽高比图像的高度或宽度小于所需的高度或宽度，则最大缩放比例可以达到30％（或更大至100％）。我们可以用溢出：隐藏其余不需要的区域。

.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%);
}

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

逆天樱2020/04/03 11:50:46

我不允许这样做“添加评论”，但是，是的，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%;
}

老丝阿飞2020/04/03 11:50:46

对于IE，您还需要添加第二行-宽度：100％；

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

卡卡西2020/04/03 11:50:46

使用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>

米亚2020/04/03 11:50:46

尝试设置既 min-height和min-width，用display:block：

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

（小提琴）

假设图像的包含元素为position:relative或position:absolute，则图像将覆盖容器。但是，它不会居中。

如果您知道图像是水平（set margin-left:-50%）还是垂直（set margin-top:-50%）溢出，则可以轻松居中。可以使用CSS媒体查询（和一些数学方法）来解决这一问题。

老丝猿阿飞2020/04/03 11:50:46

假设您可以安排要填充的容器元素，这似乎可以工作，但感觉有点破旧。本质上，我只是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>

LGil2020/04/03 11:50:46

我需要模仿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>

猪猪2020/04/03 11:50:46

我找到了一个模拟覆盖和包含的简单解决方案，它是纯CSS，适用于具有动态尺寸的容器，并且对图像比例没有任何限制。

请注意，如果您不需要支持IE或16之前的Edge，则最好使用object-fit。

背景尺寸：封面

.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>

Gil2020/04/03 11:50:46

实际上有一个相当简单的CSS解决方案，甚至可以在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>

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer