Использование max-width = 100% и max-height = 100% на изображении, рассчитать ширину/высоту отображения

Question

Я создаю слайд-шоу для изображений различных размеров, отображаемых по вертикали и по горизонтали в области холста.

В моем CSS я установил ширину и высоту изображения на 100%, чтобы каждое изображение пропорционально заполнило холст. Я хочу, чтобы холст автоматически настраивал себя так, чтобы он соответствовал экрану зрителя, поскольку исходный размер изображений довольно большой (до 800 пикселей в высоту).

Я использую jQuery 1.4 и использую высоту изображения для вычисления верхнего значения для абсолютного позиционирования его до середины холста.

Я попытался использовать jQuery, чтобы получить .height(), innerHeight() и outerHeight(), но он всегда получает полный размер изображения.

Я извлек элемент DOM из объекта jQuery и попытался использовать .width, .offsetWidth и .clientWidth, но это тоже всегда возвращает полный размер изображения.

Firebug отображает правильные размеры, поэтому я знаю, что есть способ вычисления фактической высоты изображения изображения, я просто не могу понять, что это такое. Как вы получаете фактическую высоту изображения изображения, если вы установили max-height = 100%?

Мне не нужно было вычислять и устанавливать высоту каждого изображения в js, но если это необходимо, я сделаю это. Мне кажется, что я могу установить размер холста и автоматически отрегулировать изображения.

Answer 1

Я предлагаю вернуть изображения к авто, а затем получить значения изображений, а затем вернуть их на 100%.

$('img').each(function(){ 
    var self = $(this); 
    self.hide() // Hide them, fading, you choose 
     .css({'width':'auto', 'height':'auto'}) // set them to auto. 
     .data('width', self.width()) // Now you can get the real size 
     .data('height', self.height()) // And store it as jQuery data in the image. 
     .css({'width':'100%', 'height':'100%'}) // Back to 100% 
     .show(); // Show them. 
}); 

или другой способ

$('img').hide().css({'width':'auto', 'height':'auto'}) 
    .each(function(){ 
     var self = $(this); 
     self.data('width', self.width()) 
      .data('height', self.height()); 
    }) 
    .css({'width':'100%', 'height':'100%'}).show(); 

Или нет необходимости скрывать их, так как, вероятно, изменение слишком быстро, но вы, возможно, потребуется сделать некоторые изменения в вашей логике, так что пользователь Безразлично во время первой загрузки.

в любом случае, выберите свой яд.