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

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

1 голос
/ 09 марта 2010 
#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' />";
}

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

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

Ответы [ 2 ]

1 голос
/ 09 марта 2010

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

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

Или вы можете использовать библиотеку "IE7" и просто установить max-width и max-height за счет другой нечетной библиотеки Javascript.

0 голосов
/ 09 марта 2010

Возможно, вы захотите попробовать это: 

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

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

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

...