jquery - 覆盖分配的空间

Question

我试图在页面上水平跨越 3 个图像。我需要这些像cssbackground-size: cover;那样行事。两个外部图像表现良好，因为它们的纵横比允许高度填充空白空间。然而，熊的图片由于其纵横比而无法复制相同的行为。

我需要这张图片拉伸，直到它达到盒子的全高。如果它超过了框的宽度，超出的部分将被 隐藏overflow: hidden;。我如何做到这一点是考虑到响应能力（调整窗口大小时缩放图像（％）。）

这是我的代码： HTML：

<section>
    <div class="albumns">
        <article>
            <div class="albumn a1">
                <%=image_tag("mount.jpg")%>
            </div>
        </article>
        <article>
            <div class="albumn a2">
                <%=image_tag("bear.jpg")%>
            </div>
        </article>
        <article>
            <div class="albumn a3">
                <%=image_tag("mount.jpg")%>
            </div>
        </article>
    </div>
</div>
</section>

CSS：

.albumns {
position: relative;
}
.albumn {
width: 100%;
float: none;
& img {
    width: 100%;
}
}

Answer 1

由于图像的高度可变，您需要修复其容器的高度。试试这个：

.albumn{
    overflow:hidden;
    width:33%;
    height:200px; /*The height you want the images*/
}
.albumn img{
    height:100%;
    width:auto;
    display:block;
    margin:0 auto;
}