Question

这可能吗？下面的代码复制了一半的行为，图像将始终覆盖div。问题是如果div小于img的尺寸，它将始终在两个轴上被裁剪。

向max-width: 100%添加max-height: 100%或img会导致图片失真。有没有办法解决这个问题而不使用JavaScript / background-img。

div {
  background-color: red;
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

div.tall {
  height: 400px;
}

div.wide {
  width: 400px;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}

img.tallCat {
  max-width: 100%;
}

img.wideCat {
  max-height: 100%;
}

Expected output:
<div style="background-image:url(https://i.stack.imgur.com/XCOwb.jpg);background-size:cover;">
</div>

Actual output:
<div>
  <img src="https://i.stack.imgur.com/XCOwb.jpg">
</div>

Actual output with max-width:
<div class="tall">
  <img class="tallCat" src="https://i.stack.imgur.com/XCOwb.jpg">
</div>

Actual output with max-height:
<div class="wide">
  <img class="wideCat" src="https://i.stack.imgur.com/XCOwb.jpg">
</div>

Answer 1

object-fit参数符合您的要求（您可以将其设置为cover或contain），但IE / Edge尚不支持： http://caniuse.com/#search=fit

添加：查看此代码段中的设置（图片代码中提供的原始图片尺寸，包含width: 100%的图片的CSS规则）：

＆＃13;

div {
  background-color: blue;
  position: relative;
  width: 300px;
  height: 200px;
  margin-bottom: 50px;
}

img.x {
  width: 100%;
  object-fit: contain;
}
img.y {
  width: 100%;
  object-fit: cover;
}

＆＃13;

<div>
  <img src="http://placehold.it/500x200/fa0" width="500" height="200" class="x">
</div>
<div>
  <img src="http://placehold.it/500x200/fa0" width="500" height="200" class="y">
</div>

＆＃13;

Answer 2

隐藏图片（visibility:hidden或opacity:0）并将其作为标记中的背景图片应用于div。当然，如果你这样做，它就会引起你为什么需要img元素的问题。

模仿背景大小：仅使用CSS覆盖div中的img

2 个答案: