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");
});

上面的代码存在两个问题：

图像处于绝对位置。有时它显示块，有时它不显示。它会在幻灯片放映之前捕捉图像淡化前的图像高度。当浏览器大小更改时，它会更改图像的高度。但是如果我们在图像褪色时调整浏览器的大小，而所有图像都不显示，则会将图像的高度捕获为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();

Answer 2

已编辑2：

一种简单的方法是在函数内部写入整个事物，如果高度为0，则在循环中调用它。

function setHeight(){
    var imageHeight=$('ul.images img').height();
    if(imageHeight==0){
        clearTimeout(window.TO);
        window.TO=setTimeout(setHeight(),100);
    }
    else{
        $('ul.images').css("height", imageHeight + "px");
    }
}
setHeight()
$(window).resize(function(){
    setHeight()
});

获得100％宽度的图像高度

2 个答案: