尝试在HTML CSS中模拟书架:如何调整书籍大小，保持与底部对齐？

Question

我正在尝试模拟一个书架，使它们看起来像这样：photoshop_mock_up

我可以让书籍对齐得很好，但不知道如何让它们保持其奇怪的高度/宽度，而不是全部调整到容器的大小：

HTML：

<div class="images-outer">
    <div class="image-inner">
        <img src="img/_0002_aristotle__poetics_and_rhetoric.png">
    </div>
    <div class="image-inner">
        <img src="img/_0005_david_mamet__make_believe_town.png">
    </div>
    <div class="image-inner">
        <img src="img/_0003_david_mamet__bambi_vs_godzilla.png">
    </div>
    <div class="image-inner">
        <img src="img/_0006_annie_dillard__pilgrim_at_tinker_creek.png  ">
    </div>
</div>

CSS：

.images-outer {
    height: 50%;
    max-height: 50%;
    display: flex;
    vertical-align: bottom;
}

.image-inner img {
    max-height: 100%;
} 

img {
    max-height: 100%;
}

这使得它们看起来像这样：web_page

想法？

Answer 1

在display: flex中，应使用align-items设置垂直对齐，使用justify-content设置水平对齐。

​

.images-outer {
    height: 300px;
    max-height: 50%;
    display: flex;
    align-items:flex-end;
    justify-content:center;
    background: black
}

.image-inner {
    max-width:30px;
    padding: 0px 5px;
}

.image-inner {
    object-fit: contain;
    object-position: bottom;
    width: 100%;
}

<div class="images-outer">
        <div class="image-inner">
            <img src="https://picsum.photos/30/200" />
        </div>
        <div class="image-inner">
            <img src="https://picsum.photos/30/240" />
        </div>
        <div class="image-inner">
            <img src="https://picsum.photos/30/180" />
        </div>
        <div class="image-inner">
            <img src="https://picsum.photos/30/200" />
        </div>
    </div>
</div>

​

Answer 2

.image-inner img{
 width:100%;
 height:auto;}

这应该有助于正确调整图像的大小

否则，您可以将每个图像划分为一个单独的类，并为每个图像指定其各自的高度。