Question

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

如果您看到3种不同的尺寸，您会看到它在第一种和第二种情况下有效，但在最后一种情况下却没有。如果我将图像标签的大小交换为：

，它将在最后一个工作

width: 100%;
height: auto;

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

实现这一目标的其他任何方式？

Answer 1

您可以通过将图片插入背景图片而不是<img />标记来实现所需效果。优点是，您不需要应用图像标记和CSS。只需使用background-size: cover;始终使图像适合视口。这样，您可以使用更少的代码并通过CSS background属性控制图像。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

为最后一个图像创建一个新类（我在jsfiddle中称它为landscape2），因为最后一个图像是宽度值高于高度值的唯一图像。然后添加：

.landscape2 {
  width:100%;
}

https://jsfiddle.net/y1zn0mxy/2/

Answer 3

这是正常行为。这是正常的行为。您不能将两个轴都设置为100％，因为您的图像将被拉伸。为什么不为水平横向添加其他类：https://jsfiddle.net/y1zn0mxy/1/？

如果您不需要<img ... />，可以使用css属性替换它：

背景
背景位置
background-size：cover

在这里您可以看到重现：https://jsfiddle.net/y1zn0mxy/3/

Answer 4

除了安德烈斯的好答案，你还有一种新方法可以解决这个问题。

可以实现与backgroound-size相同的功能：使用对象适合覆盖图像。

它没有被广泛支持（在IE / Edge中没有支持）但是有一个可用的polyfill

img {
    position: absolute;
    top: -100%;
    right: -100%;
    bottom: -100%;
    left: -100%;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box {
  position: relative;
  overflow: hidden;
}

<div style="width:300px; height:250px; margin: 30px; background: black; float: left;">    
    <div class="img box" style="padding:0; width: inherit; height: inherit;">
        <img src="http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg" class="landscape" />
    </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;">
        <img src="http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg" class="landscape" />
    </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;">
        <img src="http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg" class="landscape" />
    </div>
</div>

任何视口中的中心图像都不会拉伸

4 个答案: