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

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

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

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

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

Это можно сделать с помощью чистого 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 (это все, что я тестировал).

2018 и более поздние версии:

Использование единиц измерения, относящихся к области просмотра, должно облегчить вам жизнь, учитывая, что у нас есть изображение кошки:

Теперь мы хотим, чтобы эта кошка была внутри нашего кода, соблюдая при этом соотношение сторон:

img {
  width: 100%;
  height: auto;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Пока не очень интересно, но что, если мы захотим изменить ширину кошек, чтобы она составляла максимум 50% от области просмотра?

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Же изображение, но теперь ограничиваются шириной максимума в 50vw VW (= ширина окно просмотр) означает , что изображение будет Й шириной окна просмотра, в зависимости от цифры предоставленной. Это также работает для высоты:

img {
  width: auto;
  height: 100%;
  max-height: 20vh;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Это ограничивает высоту изображения до 20% от области просмотра.

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

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

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

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

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

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

РЕДАКТИРОВАТЬ:

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

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

Изначально я использовал следующий 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>

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

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

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

Дальнейшее чтение :

• CSS3 2D-преобразования
• CSS3 Эффект наведения, переходы, преобразования, анимация

Просто используйте этот код. Большинство забывают указать max-width как максимальную ширину изображения.

img {   
    height: auto;
    width: 100%;
    max-width: 300px;
}

Проверьте эту демонстрацию http://shorturl.at/nBKVY

Пытаться

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

Работает только с блоком отображения и встроенным блоком, это не влияет на гибкие элементы, поскольку я только что потратил целую вечность, пытаясь выяснить.