1

这是我关于 stackoverflow 的第一个问题，因为我真的无法在其他地方找到解决方案。我真的希望任何技术天才可以在这里帮助我。

我目前正在创建一个类似 instagram 的网站，其中加载了很多图像。有些是单个图像，有些是多个图像，它们使用 Bootstrap 的轮播展示。到目前为止，除了高度之外，一切都很好。现在我正在将.item类硬编码为 的高度750px，这就是我想要的最大高度。但是任何低于此高度的图像都会在容器的顶部和底部创建一个空白区域。我想知道是否有检测每组图像的最大高度，并将高度应用于其容器。我尝试使用 jQuery 来选择每个图像集的图像最大高度，但我没有得到任何正确的值。或者，有没有更好的方法来解决这个问题？

我想要的是短图像在其容器中仅占据它们的短高度。如果一组图像具有不同的高度，则将最大图像高度设置为容器的高度。抱歉，如果我造成任何混乱，但我希望我的问题很清楚。谢谢！

在此处输入图像描述

这是我的 HTML 代码的一部分：

<div id='myCarousel$id' class='carousel' data-interval='false'>
    ...
    <div class='carousel-inner postedImage' id='carousel-inner$id'>
        <div class='item active'>
            <img src='$path' />
        </div>
        <div class='item'>
            <img src='$path' />
        </div>
         .....
    </div>
    ...

CSS：

.postedImage {

    width: 600px;
    max-height:750px;
}

.item {

    height:750px;

}

.item img {

    height: auto;
    width: 100%; 
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;

}

注意：我使用绝对位置来防止不同高度的图像在彼此之间滑动时上下反弹。上、右、下、左用于全方位裁剪大于 750 像素的图像，而不是仅从底部裁剪。.item 是为每个图像设置高度的部分。但它必须取实际值，如果我设置为 auto 或 %，则不会出现图像。

那么如何根据每个集合中图像的最大高度将不同的 px 附加到“.item”类？

如果我使用 jQuery 来查找每个图像集的最大高度，它会及时调整每个图像集的容器高度吗？我的意思是因为它们有很多图像。即使我这样做$(document).ready(function)，一旦这些图像加载到浏览器中，它是否会有效地进行调整？如果没有，我可以知道是否有其他选择可以解决我的问题？

任何帮助都感激不尽！

4

0 回答 0