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

我试图模拟书架上的书，使它们看起来像这样：

我可以让书对齐得很好，但我不知道如何使它们保持其奇数的高度/宽度，而不仅仅是根据容器调整大小：

HTML:

CSS:

。外部图像{
身高：50%；
最大高度：50%；
显示器：flex；
垂直对齐：底部对齐；
}
.图像内部img{
最大高度：100%；
} 
img{
最大高度：100%；
}

这使它们看起来像这样：

---

想法？

在

显示：flex

中，您应该使用

对齐项目

设置垂直对齐和

对齐内容

，以进行水平对齐

。外部图像{
高度：300px；
最大高度：50%；
显示器：flex；
对齐项目：柔性端；
证明内容：中心；
背景：黑色
}
.图像内部{
最大宽度：30px；
填充：0px 5px；
}
.图像内部{
对象匹配：包含；
物体位置：底部；
宽度：100%；
}

这将有助于正确调整图像大小

---

除此之外，您还可以将每个图像划分为一个单独的类，并为每个类指定其各自的高度。

这非常有用。也就是说，当我添加实际图像时，它不起作用。我尝试将图像缩放到视口大小，而不是将其展平。所以-高度不会设置为实际像素。。。我尝试了多种方法，但不知道如何缩放图像，而不是将图像缩放到高度：100%。将图像放入

div.image-internal

，然后给图像

宽度：100%；对象匹配：包含；对象位置：底部

？这样，

div.image-internal

将设置每本书的宽度，图像将放在div的底部，同时保持纵横比

div.image-internal

的高度应设置为大于最高的书，模仿书架的高度。@elwinjransom现在我更新了代码段以包含一些示例图像。这就是你要找的吗？看起来很棒！让我试试看！不幸的是，这也不起作用，因为无法缩放项目。一旦我应用了transform:scale（.5），一切都变得疯狂。

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