html - CSS:获取内联图像以使用容器的 100% 宽度和高度

Question

我正在尝试找到一个解决方案，而不必使用 background-image , 但能够使用内联 <img> .

我想这样做，如果图像容器的尺寸与图像不同，图像仍会填充容器的宽度和高度 , 裁剪它必须裁剪的任何部分。

此外，如果图像的一部分小于容器，它将拉伸(stretch)超过 100% 以填充容器。

在下面的示例中，我有一个巨大的图像，可以轻松填满容器的宽度和高度。容器与图像的纵横比不同，所以我最终得到了水平或垂直的空白空间。无论如何我都想填充那个容器，即使部分图像会被裁剪掉。

class[*='container'] {
  margin-bottom: 50px;
}
.container img {
  width: 20%;
  height: 20%;
}
.container-1 {
  background: #f0f0f0;
  width: 400px;
  height: 150px;
}
.container-1 img {
  object-fit: cover; 
  max-width: 100%;
  max-height: 100%;
}
.container-2 {
  background: #f0f0f0;
  width: 150px;
  height: 400px;
}
.container-2 img {
  object-fit: cover; 
  max-width: 100%;
  max-height: 100%;
}

<p>Original image:</p>
<div class="container">
  <img src="https://themetry.com/wp-content/uploads/pug.jpg" />
</div>

<p>Container 1:</p>

<div class="container-1">
  <img src="https://themetry.com/wp-content/uploads/pug.jpg" />
</div>

<p>Container 2:</p>

<div class="container-2">
  <img src="https://themetry.com/wp-content/uploads/pug.jpg" />
</div>

Answer 1

.container-1 img {
    object-fit: cover;
    /* max-width: 100%; */
    /* max-height: 100%; */
    width: 100%;
    height: 100%;
}

class[*='container'] {
  margin-bottom: 50px;
}
.container img {
  width: 20%;
  height: 20%;
}
.container-1 {
  background: #f0f0f0;
  width: 400px;
  height: 150px;
}
.container-1 img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.container-2 {
  background: #f0f0f0;
  width: 150px;
  height: 400px;
}
.container-2 img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

<p>Original image:</p>
<div class="container">
  <img src="https://themetry.com/wp-content/uploads/pug.jpg" />
</div>

<p>Container 1:</p>

<div class="container-1">
  <img src="https://themetry.com/wp-content/uploads/pug.jpg" />
</div>

<p>Container 2:</p>

<div class="container-2">
  <img src="https://themetry.com/wp-content/uploads/pug.jpg" />
</div>

因为您已经在使用 object-fit，所以我也在我的回答中使用了它。请记住它是 not supported by IE / Edge .以下是一些解决方法:https://stackoverflow.com/a/37127590/3597276