Javascript/jQuery для изменения размера изображений при загрузке?

Question

Вместо создания эскизов для моих изображений, я хотел бы показать исходные изображения на моей странице. Для просмотра мне все еще нужно изменить размер этих изображений, но вместо добавления на них width:200px, я хочу отображать каждое изображение в контейнере div, но с размером, случайным образом выбранным из трех вариантов.

Эти 3 типа контейнеров div (и, следовательно, внешний вид изображений) будут иметь 3 разных размера, все с одинаковой шириной. 300x100, 300x200, 300x400.

Конечно, при обновлении изображения могут иметь разный размер.

Как я могу это сделать?

Answer 1

Установить каждую высоту таким образом:

var heights = [100, 200, 400]; 
var height = heights[Math.ceil(Math.random()*3)-1]; 

Я думаю, вы хотели бы, чтобы перебирать контейнеры ...

var heights = ["100px", "200px", "400px"]; 
$(".container").each(function(i,e) { 
    var height = heights[Math.ceil(Math.random()*3)-1]; 
    $(e).css('height', height); 
});