Изменение размера каждого изображения в зависимости от размеров в jQuery

Question

У меня есть базовая концепция того, как достичь этого результата, однако я не могу получить действительно нужные результаты. Я создаю фиксированные контейнеры размером 100px (высота) x 75px (ширина), в которых хранятся изображения. Затем я пытаюсь использовать jQuery для проверки того, высока ли высота изображения, а не ширина, наоборот, или они равны. Если они равны или ширина больше, я устанавливаю их на 100% каждый и устанавливаю высоту как автоматически, тогда как если высота является более высокой, я устанавливаю ее на 100% и ширину на авто. Ниже приведен текущий код, который меняет размеры изображений, но не на то, как они мне тоже понравятся.

HTML

<div id="imagesContainer"> 
    <div style="height: 100px; width: 75px; border: 1px solid RGB(0, 0, 0);"> 
     <div class="thumbImage"> 
      <img src="INSERT 100 x 500 IMAGE HERE"></img> 
     </div> 
    </div> 

    <div style="height: 100px; width: 75px; border: 1px solid RGB(0, 0, 0);"> 
     <div class="thumbImage"> 
      <img src="INSERT 250 x 280 IMAGE HERE"></img> 
     </div> 
    </div> 

    <div style="height: 100px; width: 75px; border: 1px solid RGB(0, 0, 0);"> 
     <div class="thumbImage"> 
      <img src="INSERT 100 x 100 IMAGE HERE"></img> 
     </div> 
    </div> 

    <div style="height: 100px; width: 75px; border: 1px solid RGB(0, 0, 0);"> 
     <div class="thumbImage"> 
      <img src="INSERT 1800x900 IMAGE HERE"></img> 
     </div> 
    </div> 
</div> 

JQuery

$(".thumbImage").children("img").each(function(){ 
    if ($(this).height() > $(this).width()) { 
     $(this).css({ 
      height: '100%', 
      width: 'auto' 
     }); 
    } else if ($(this).height() < $(this).width() || ($(this).height() == $(this).width()) { 
     $(this).css({ 
      height: 'auto', 
      width: '100%' 
     }); 
    } 
}); 

Answer 1

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

Здесь:

$(".thumbImage").children("img").each(function(){ 
    imgRatio = $(this).height()/$(this).width(); 
    containerRatio = $(this).parent().height()/$(this).parent().width(); 
    if (imgRatio > containerRatio) { 
     $(this).css({ 
      height: '100%', 
      width: 'auto' 
     }); 
    } else { 
     $(this).css({ 
      height: 'auto', 
      width: '100%' 
     }); 
    } 
}); 

Не уверен, что если код 100% правильно, не испытывал. Но в основном мы тестируем RATIO высоты/ширины и сравниваем его с отношением контейнера, чтобы иметь возможность решить, какое изменение мы сделаем.

Answer 2

У вас есть синтаксические ошибки в сценарии, и '.thumbImage' должен быть установлен на высоте 100%:

Синтаксическая ошибка:

if($(this).height() < $(this).width() || ($(this).height() == $(this).width())) 

(Вы пропустили закрывающую скобку)

CSS:

.thumbImage { 
    height:100%; 
} 

JS Fiddle: http://jsfiddle.net/fMhr2/1/

Кроме того, вы должны рассчитать соотношение, чтобы заставить его работать правильно, как Salketer только что упомянутый. Я добавил, что к этому JSFiddle