Включить автоматическое изменение размера изображения

Браузеры, такие как IE в разделе «Инструменты», «Параметры», «Дополнительно», имеют флажок «включить автоматическое изменение размера изображения». Правильно ли говорить, что эта функция не имеет ничего общего с HTML и/или JavaScript на самой странице и является ли функциональность, которую HTML и/или JavaScript на самой странице не могут командовать?Включить автоматическое изменение размера изображения

Я спрашиваю, потому что я не могу найти способ убедить HTML IMG вести себя таким образом, который изменяется на размер окна, который, конечно, может варьироваться в зависимости от платформы. Можно задать высоту пикселя IMG и/или ширину пикселя, но это не касается размера окна. И можно установить высоту процента IMG процентов и/или процентную ширину, но это касается исходного размера изображения, а не размера окна.

Я видел предложения по вставке HTML IMG с HTML DIV, который устанавливает пределы высоты и/или ширины, но HTML IMG, похоже, сбрасывает эти ограничения. То же HTML HTML и/или HTML BODY ограничения. Во всех случаях HTML IMG, похоже, имеет собственный разум и будет ограничивать себя, особенно вертикально, исключительно по отношению к самому изображению, а не к любому контейнеру HTML.

Как подготовить HTML IMG для работы в соответствии с размером контейнера и/или размером окна? Был бы благодарен за фактические примеры, а не только за предложения. Благодарю.

источник

2012-01-26 Frank Natoli

img { width:100%; height: auto; } сгибает ваше изображение до размера вашего контейнера, будь то ваш контейнер для изображений или документ. Установка max-width и min-width ограничит изображение желаемыми размерами.

Вот демо

http://jsfiddle.net/T6PvL/

Просто нажмите окно результата, так что вы можете увидеть, как изображение прогибается. Если вы хотите установить ограничение по размеру, просто укажите img { max-width:300px /*or any other size you like */, и изображение зайдет так далеко, как вы его скажете.

источник

2012-01-26 11:38:23

Это похоже на то, что мне нужно; лунный JPG заключен в поле, которое само по себе является подмножеством видимого окна. Я захватил источник XHTML и изучил его. Благодарю. –

Боюсь, что это не помогло. Посмотрите на www.discoverydata.net84.net и нажмите на foo.xhtml. Хотя foo.xhtml имеет CSS-код IMG, который вы рекомендуете, с IE 9.0 в TABLE внутри BODY нет ни горизонтального, ни вертикального ограничения IMG, а с Safari 5.1.2 есть горизонтальное ограничение [и изменение размера], но нет ограничения по вертикали. Любопытно, что с локальной копией foo.xhtml и двух изображений IE 9.0 и Safari 5.1.2 ведут себя одинаково, т. Е. Горизонтальное, но не вертикальное ограничение. Почему CSS IMG игнорируется? Благодарю. –

@FrankNatoli придется тестировать дома, у меня есть только Safari 4 и IE8 на моем рабочем компьютере, и в обоих случаях изображения пропорционально изменяются в зависимости от браузера. –

Вам нужно будет подписаться на событие изменения размера окна. Вот фрагмент кода. Каждый раз при изменении размера окна он запускается. Этот скрипт просто устанавливает новые размеры в пролетах

<script type="text/javascript"> 
    //<![CDATA[ 
    $(function() { 
     $(window).resize(function (e, e1) { 
      $("#wWidth").text($(window).width()); 
      $("#wHeight").text($(window).height()); 
     }); 
    }); 
    //]]> 
</script> 
<span id="wWidth"></span> 
<span id="wHeight"></span>

Edit:

Проверьте жить демо here

Edit: Изменить размер окна, чтобы увидеть пример в Работа.

источник

2012-01-26 11:42:24 Oybek

Включить автоматическое изменение размера изображения

ответ

Смежные вопросы