javascript - 获取 100% 宽度图像的高度

Question

我试图从浏览器的宽度中获取其宽度为 100% 的图像高度。

$(document).ready(function(){
    var heightImage = $('ul.images img').height();
    $('ul.images').css("height", heightImage + "px");
});

上面代码的问题是，当我调整浏览器大小时，100% 宽度的图像高度发生变化，heightImage 没有变化。

所以我决定使用:

$(window).resize(function(){
    var heightImage = $('ul.images img').height();
    $('ul.images').css("height", heightImage + "px");
});

上面的代码有两个问题:

图像处于绝对位置。有时显示 block ，有时不显示。它在图像淡入之前捕获图像高度以从幻灯片放映中显示。当浏览器大小改变时，它会改变图像的高度。但是如果我们在图像褪色时调整浏览器的大小，而所有图像都没有显示，它会捕获图像的高度为 0px。

该代码的第二个问题是它仅在浏览器尺寸发生变化时检测图像的高度。

谁能给我一个替代方案，如何在宽度为 100% + 浏览器调整大小时捕获幻灯片上图像的高度？

提前致谢。

我的 HTML 代码

<ul class="images">
   <li><img src="1.jpg" /></li>
   <li><img src="2.png" /></li>
   <li><img src="3.jpg" /></li>
   <li><img src="4.jpg" /></li>
</ul>

我只是从附近的某个地方复制粘贴了这段代码:

var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var target;

triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
    images.fadeOut(500).eq(target).fadeIn(500);
    triggers.removeClass('active').eq(target).addClass('active');
}

triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});

$('.next').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}

var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },5000);
}

Answer 1

这样做:

var heightImage = $('ul.images img').height();
$(window).resize(function(){
    heightImage = $('ul.images img').height();
    $('ul.images').css("height", heightImage + "px");
}).resize();