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

时间:2016-10-09 08:22:58

标签: html css image css3 viewport

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

这是一个例子: https://jsfiddle.net/y1zn0mxy/

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

,它将在最后一个工作
width: 100%;
height: auto;

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

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

4 个答案:

答案 0 :(得分:6)

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

为最后一个图像创建一个新类(我在jsfiddle中称它为landscape2),因为最后一个图像是宽度值高于高度值的唯一图像。然后添加:

.landscape2 {
  width:100%;
}

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

答案 2 :(得分:1)

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

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

  • 背景
  • 背景位置
  • background-size:cover

在这里您可以看到重现: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>