将属性中具有百分比单位的图像大小限制为包含图像的容器答案

【问题标题】：Limit the size of imag with percent unit in attribute to the container that contain the images将属性中具有百分比单位的图像大小限制为包含图像的容器
【发布时间】：2022-01-06 01:26:43
【问题描述】：

我在一个 div 中有三张图片，其中一张的高度比其他的高。我可以“告诉”所有图像的高度不超过它们所在 div 的 50%/70%，那么，具有较大高度的图像会相应地改变吗？

  <div class="images">
            <img src="https://images-us.bookshop.org/ingram/9781640094765.jpg?height=500&v=v2" alt="a book">
            <img src="https://images-us.bookshop.org/ingram/9781565842632.jpg?height=500&v=v2" alt="a book">
            <img src="https://images-us.bookshop.org/ingram/9780805050271.jpg?height=500&v=v2" alt="a book">
        </div>

css

.images {
    display: flex;
    justify-content: space-around;
    align-items:flex-end;
    border: 5px solid blue;
}

.images img {
    max-height: 50%;
    

}

【问题讨论】：

标签： html css image

【解决方案1】：

您必须为容器添加高度才能在子元素上使用具有最大高度的 percantages。容器子元素没有高度不知道从什么计算高度，因为容器高度正在采用子元素。

所以这样的事情可以解决你的问题：

.images {
    display: flex;
    justify-content: space-around;
    align-items:flex-end;
    border: 5px solid blue;
    height: 500px;
}

.images img {
    max-height: 50%;
}

【讨论】：