我可以用<img/>填充流畅的方框吗？

Question

我在我的一个布局中使用了流行的CSS流畅方法，我很好奇是否有办法让图像元素填满整个方块。

这是CSS：

.box {
    width:100%;
    height:0;
    padding-bottom:100%;
}

我的HTML将是：

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

我希望将图片填满方框，但据我所知，填充不会允许这样做。任何想法（除了使用背景图像。）？

Answer 1

只需在img上使用100%

.box {
    background:red;
    width:30%;
    height:0;
    padding-bottom:30%;
}
.box img {
  width:100%;
}

<div class="box">
    <img src="https://placehold.it/400" alt="image" />
</div>