使用显示块检查图像的高度答案

【问题标题】：Check the height of an image with a display block使用显示块检查图像的高度
【发布时间】：2015-10-08 12:25:25
【问题描述】：

这就是我想要达到的目标：我有在 div 内旋转的图像列表（淡入淡出效果）在每个旋转中都有一个显示，其余的都被隐藏（显示：无）

我正在尝试创建一个“调整大小”事件，该事件将始终检查仅现有图像的高度（序列中唯一显示的图像）并将此高度分配给它的主容器（在我的情况下：UL）

这是我的 HTML：

<ul id="output">
    <li>
    <div class="description">Lorem Ipsum</div>
        <img src="images/sample1.jpg">

    </li>
    <li>
    <div class="description">Lorem Ipsum</div>
        <img src="images/sample2.jpg">
    </li>
    <li>
    <div class="description">Lorem Ipsum</div>
        <img src="/images/sample3.jpg">
    </li>
</ul>

还有我的 JS：

jQuery(window).resize(function() {

    slide_img = jQuery.find("ul#output li img");
    slide_img_height = jQuery(slide_img).height();


    if(jQuery(slide_img).css("display") != "none"){
        jQuery("ul#output").height(slide_img_height);
    }



});

它不工作。它还获取序列中“隐藏”图像的高度并显示它们的高度（等于 0）

如何始终只拉取带有显示块的图像并获取它的高度，然后将其分配给主 UL？

谢谢

【问题讨论】：

标签： resize height

【解决方案1】：

请确保我理解您的问题： 1.）您有一个包含多个图像的容器，一次只能看到其中一个。 2.) 您想更改容器的大小以适合当前显示的图像。 3.) 您是否还尝试将高度（以像素为单位）显示为文本元素？

如果您只是想完成前两个，您可以将图像嵌套在 a 而不是 like 中：

<div id='output'>
    <div class='container'>
        <div class='description'>Lorem ipsum</div>
        <div class='image>
            <img src='images/sample1.jpg' />
        </div>
    </div>
    <div class='container'>
        <div class='description'>Lorem ipsum</div>
        <div class='image>
            <img src='images/sample2.jpg' />
        </div>
    </div>
    <div class='container'>
        <div class='description'>Lorem ipsum</div>
        <div class='image>
            <img src='images/sample3.jpg' />
        </div>
    </div>
</div>

如果这样做，“输出”div 的高度将始终是唯一显示图像的高度。如果需要显示实际高度的值，可以使用：

var outputHeight = $('#output').height();

【讨论】：

嗨@anson 第三点无关紧要。只有前 2. 除此之外 - 反正我可以保持原来的结构？
- 而不是只使用 Div 的？那是因为主滑块脚本正在处理它。请告诉我谢谢！

【解决方案2】：

由于我无法在评论中添加足够的代码来回答您的后续问题，因此这里是：

如果你需要保持原来的结构，试试这个：

<ul id="output">
    <li class="container active">
        <div class="description">Lorem Ipsum</div>
        <img src="images/sample1.jpg" />
    </li>
    <li class="container">
        <div class="description">Lorem Ipsum</div>
        <img src="images/sample2.jpg" />
    </li>
    <li class="container">
        <div class="description">Lorem Ipsum</div>
        <img src="images/sample3.jpg" />
    </li>
</ul>

然后你可以选择<li>'s 是隐藏的还是可见的，像这样的一些CSS：

.contaner {
    display: none;
}
.active {
    display: inline;
}

像这样，当您设置display: none; 时，整个<li> 将被删除，只有可见的会占用<ul> 中的空间。这将使您的<ul> 仅与当前显示的图像一样高。

希望能回答你的问题。

【讨论】：

【解决方案3】：

所以最终，这就是我想出的，而且效果很好：

jQuery(window).resize(function() {

    // variables presenting the LI, IMG and th eheigt of the img
    slide_li = jQuery("ul#output li").css('display','list-item');
    slide_img = jQuery(slide_li).find('img');
    slide_img_height = jQuery(slide_img).height();

    jQuery("ul#output").height(slide_img_height);

});

通过这种方式，我能够找到唯一显示“列表项”的图像（我知道这很奇怪，但这就是滑块的工作方式，我没有构建它）然后，获取图像高度并将其分配给我的情况下的主容器：

ul#output

感谢@anson 尽最大努力提供帮助谢谢

【讨论】：