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

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

2 голосов
/ 13 февраля 2010

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

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

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

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

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

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

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

1 Ответ

2 голосов
/ 18 февраля 2010

Я предлагаю вернуть изображения в автоматический режим, а затем получить значения изображений, а затем установить их обратно на 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();

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

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

...