Получить высоту изображения 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"); 
}); 

Есть две проблемы с выше код:

изображение находится в абсолютной позиции. Иногда он отображает блок, а когда-то он отображает его. Он улавливает высоту изображения перед тем, как изображение fadein отобразится со слайд-шоу. Он изменяет высоту изображения при изменении размера браузера. Но если мы изменим размер браузера, когда изображение затухает, тогда как на всех изображениях нет ни одного изображения, он будет считать высоту изображения равным 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() 
});