<img/>以涵盖分配的空间

Question

我试图在页面上横向跨越3个图像。我需要这些像css background-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;
}