我有 3 种不同的框尺寸,我需要在其中显示图像。图像应占据框的整个宽度和高度,但不应拉伸(stretch)。它可以裁剪和居中图像。
举个例子: https://jsfiddle.net/y1zn0mxy/
如果您看到 3 种不同的尺寸,您会发现它适用于第一种和第二种情况,但不适用于最后一种。如果我将图像标签的大小交换为:
width: 100%;
height: auto;
但它在前两个中不起作用。
还有其他方法可以实现吗?
最佳答案
您可以通过插入图像作为背景图像而不是 <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>
关于html - 在任何视口(viewport)中居中图像而不拉伸(stretch),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39941516/