100% 高度或 100% 宽度答案

【问题标题】：100% height OR 100% width100% 高度或 100% 宽度
【发布时间】：2015-02-04 08:07:34
【问题描述】：

如何使图像无论如何都以设定的大小填充图块并保持其纵横比？例如，如果图像足够宽，它会扩展为足够高，溢出隐藏，反之亦然。这是我目前所拥有的，但如果需要将图像调整为 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>

【问题讨论】：

使用width:100%; height:auto; 或height:100%; width:auto;

标签： css height width

【解决方案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/

【讨论】：

【解决方案2】：

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

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

【讨论】：

是的，不幸的是，这是唯一的纯 CSS 方法。