Как динамически изменять размер изображения с помощью CSS при изменении ширины/высоты браузера?

Интересно, как я мог бы изменить размер изображения вместе с окном браузера, здесь - это то, что я сделал до сих пор (или скачать весь сайт в ZIP).

Это хорошо работает в Firefox, но у него есть проблемы в Chrome: изображение не всегда изменяется в размерах, оно как-то зависит от размера окна при загрузке страницы.

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

Любые идеи о том, как я могу сделать это более пуленепробиваемым? (Если мне понадобится JavaScript, я тоже смогу жить с этим, но CSS предпочтительнее.)

Ответ 1

Этот может выполняться с помощью чистого CSS и даже не требует медиа-запросов.

Чтобы сделать изображения гибкими, просто добавьте max-width:100% и height:auto. Изображение max-width:100% и height:auto работает в IE7, но не в IE8 (да, другая странная ошибка IE). Чтобы исправить это, вам нужно добавить width:auto\9 для IE8.

источник: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS:

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

И если вы хотите применить фиксированную максимальную ширину изображения, просто поместите его в контейнер, например:

<div style="max-width:500px;">
    <img src="..." />
</div>

Пример JSFiddle здесь. Нет необходимости в JavaScript. Работает в последних версиях Chrome, Firefox и IE (это все, что я тестировал).

Ответ 2

window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

В IE onresize событие запускается при каждом изменении пикселя (ширина или высота), поэтому может возникнуть проблема с производительностью. Уменьшите размер изображения за несколько миллисекунд, используя javascript window.setTimeout().

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

Ответ 3

Задайте для свойства resize значение. Затем вы можете изменить ширину и высоту следующим образом:

.classname img{
  resize: both;
  width:50px;
  height:25px;
}

Ответ 4

Используете ли вы jQuery?

Потому что я быстро выполнил поиск в jQuery-плагинах, и у них, похоже, есть плагин для этого, проверьте это, нужно работать:

http://plugins.jquery.com/project/jquery-afterresize

EDIT:

Это решение для CSS, я просто добавляю style = "width: 100%" и работает для меня, по крайней мере, в хром и Safari. У меня нет т.е. Так что просто проверьте там и дайте мне знать, вот код:

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>

Ответ 5

Вы можете использовать свойство CSS3 scale для изменения размера изображения с помощью css:

.image:hover {
  -webkit-transform:scale(1.2); 
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease; 
          transition: all 0.7s ease;
}

Дополнительная литература:

Ответ 6

Вначале я использовал следующий html/css:

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

<div> 
  <img src="..." />
</div>

Затем я добавил class="img" в <div> следующим образом:

<div class="img">
  <img src="..." />
</div>

И все стало нормально работать.