Question

如何使图像填充具有设定尺寸的图块，无论如何并保持其纵横比？例如，如果图像足够宽，它会扩展到足够高，溢出被隐藏，反之亦然。这是我到目前为止所做的，但如果图像需要调整为100％高度，它不会扩展超出框的宽度并使图像失真。

.box{
   width: 100px;
   height: 100px;
   overflow: hidden;
}
.image{
   min-width: 100%;
   min-height: 100%;
}

<div class="box">
  <img class="image" src="/img.jpg">
</div>

Answer 1

另一种替代css方式是使用cover

  background: url(images/bg.jpg) no-repeat center center fixed; 
  background-size: cover;

有关详细信息，请参阅来源：https://css-tricks.com/almanac/properties/b/background-size/

Answer 2

我放弃并在我的div中使用了以下CSS：

background: url("dynamic-img.jpg") repeat scroll center center / cover  rgb(191, 30, 46)

100％高度或100％宽度

2 个答案: