我有3种不同的盒子尺寸,我需要在其中显示图像。图像应占据盒子的整个宽度和高度,但不应拉伸。它可以裁剪和居中图像。
这是一个例子: https://jsfiddle.net/y1zn0mxy/
如果您看到3种不同的尺寸,您会看到它在第一种和第二种情况下有效,但在最后一种情况下却没有。如果我将图像标签的大小交换为:
,它将在最后一个工作width: 100%;
height: auto;
但是它在前两个版本中不起作用。
实现这一目标的其他任何方式?
答案 0 :(得分:6)
您可以通过将图片插入背景图片而不是<img />
标记来实现所需效果。优点是,您不需要应用图像标记和CSS。只需使用background-size: cover;
始终使图像适合视口。这样,您可以使用更少的代码并通过CSS background属性控制图像。
.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;
答案 1 :(得分:1)
为最后一个图像创建一个新类(我在jsfiddle中称它为landscape2),因为最后一个图像是宽度值高于高度值的唯一图像。然后添加:
.landscape2 {
width:100%;
}
答案 2 :(得分:1)
这是正常行为。这是正常的行为。您不能将两个轴都设置为100%,因为您的图像将被拉伸。为什么不为水平横向添加其他类:https://jsfiddle.net/y1zn0mxy/1/?
如果您不需要<img ... />
,可以使用css属性替换它:
在这里您可以看到重现:https://jsfiddle.net/y1zn0mxy/3/
答案 3 :(得分:1)
除了安德烈斯的好答案,你还有一种新方法可以解决这个问题。
可以实现与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>