html - 在任何视口(viewport)中居中图像而不拉伸(stretch)

Question

我有 3 种不同的框尺寸，我需要在其中显示图像。图像应占据框的整个宽度和高度，但不应拉伸(stretch)。它可以裁剪和居中图像。

举个例子: https://jsfiddle.net/y1zn0mxy/

如果您看到 3 种不同的尺寸，您会发现它适用于第一种和第二种情况，但不适用于最后一种。如果我将图像标签的大小交换为:

width: 100%;
height: auto;

但它在前两个中不起作用。

还有其他方法可以实现吗？

Answer 1

您可以通过插入图像作为背景图像而不是 <img /> 来简单地实现所需的效果。标签。优点是，您不需要图像标签和应用于它们的 CSS。只需使用 background-size: cover; 始终使图像适合视口(viewport)。这样您的代码就会少得多，并且可以通过 CSS 控制图像 background属性(property)。

.img {
  background-image: url(http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

<div style="width:300px; height:250px; margin: 30px; background: black; float: left;">
  <div class="img box" style="padding:0; width: inherit; height: inherit;"></div>
</div>

<div style="width:300px; height:500px; margin: 30px; background: black; float: left;">
  <div class="img box" style="padding:0; width: inherit; height: inherit;"></div>
</div>

<div style="width:500px; height:200px; margin: 30px; background: black; float: left;">
  <div class="img box" style="padding:0; width: inherit; height: inherit;"></div>
</div>