jquery - 我可以用 填充一个流动的方框吗？

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>