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

Question

#foo {width: 300px; height: 400px; overflow: hidden;} 

<div id="foo"></div> 

this.someimage = randomImageUrl; 
$("foo").innerHTML = "<img src='"+this.someimage+"' class='fooimage' />"; 

Теперь изображение может быть 200x200 или 1100x400 ... это абсолютно случайно. Я могу просто растянуть его (или уменьшить его размер), используя:

.fooimage {width: 300px; height: 400px;} 

$("foo").innerHTML = "<img src='"+this.someimage+"' class='fooimage' />"; 

Или я мог проверить его размер:

imgHeight = newImg.height; 
imgWidth = newImg.width; 

... и, возможно, что-то вроде этого:

if(imgHeight >400){ 
    $("foo").innerHTML = "<img src='"+this.someimage+"' height='400' />"; 
} 

и обозреватели сделают все остальное.

Но должно быть что-то лучше. Есть идеи? Благодаря! :)

Answer 1

Это идея, связанная с атрибутами (плохо поддерживается) max-width и max-height. Предполагается, что они поддерживаются в IE7, и они поддерживаются во всем остальном современном.

На изображении, вы можете установить max-width, max-height, давая поддержку IE> 7 и все остальное, а затем выбрать в зависимости от того что вам действительно нужно самое между width и height используя IE6 условно установить, что. Это не будет выглядеть так же на IE6, но это простое решение. (Использование IE6 снизилось примерно на 10%, так что это уже не так уж плохо.)

Или вы могли бы использовать the "IE7" library и просто установить максимальную ширину и максимальную высоту за счет другой нечетной библиотеки Javascript.

Answer 2

Вы можете попробовать это:

$(window).load(function() { 
    if ($('#my_image').width() > 300) { 
     $('#my_image').css({'width':'300px'}); 
    } 
}); 

Я положил его в $(window).load(), потому что он просто не работает в document.ready(): последнего огня перед загружаются изображения и поэтому, прежде чем их размеры известны ,

(Чтобы быть более точным, на самом деле он также работает, но только потому, что изображения уже находятся в кеше браузера. Если вы очистите кеш, на следующем следующем экране он не будет работать).