我试图模拟一个书架，使它们看起来像这样：photoshop_lock_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
想法？
在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>.image-inner img{
width:100%;
height:auto;}
这将有助于正确调整图像的大小
否则，你可以将每张图片划分为一个单独的类别，并赋予每张图片单独的高度。