Javascript / jQuery在加载时随机调整图片大小？

Question

Instead of creating thumbnails for my images, I would like to show the original images in my page. For viewing purposes, I still need to resize these images but instead of adding a width:200px on them, I want to display each image in a div container but with size randomly chosen from three choices.

These 3 types of div containers (and therefore the images appearance) will have 3 different sizes, all with the same width. 300x100, 300x200, 300x400.

Of course, upon refresh, the images may have a different size now.

How can I do this ?

Answer 1

Set each height this way:

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

I guess you would want to iterate through the containers...

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