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

Question

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

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

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

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

Answer 1

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

Вот демонстрационная версия

http://jsfiddle.net/T6PvL/

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

Answer 2

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

<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>

Редактировать:

Ознакомьтесь с демонстрацией здесь

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