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

107

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

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

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

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

Депи
источник
Используйте медиа-запросы CSS3 или обработчик событий javascript window.onresize. w3schools.com/jsref/event_onresize.asp
Шахид,
Если вы используете бутстрап, добавьте такой класс: class = "img-thumbnail". Вот и все.
VivekDev 03

Ответы:

179

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

Курт Шиндлер
источник
Я тестировал ссылку jsfiddle как с Opera 11, так и с недавними версиями Firefox, и, хотя она прекрасно меняет размер изображения при уменьшении окна, этого не происходит, когда размер окна превышает 650 пикселей
GDR
3
@GDR Я бы не хотел, чтобы изображение вырастало за пределы своего собственного размера, оно просто пикселизировалось и выглядело некрасиво. Если вам нужно сделать больше, я бы просто начал с большего изображения.
Курт Шиндлер
Хорошо, тогда я ошибочно предположил, что в этом суть вопроса, извините.
GDR
2
Установка max-width на 100% и height на auto ничего для меня не сделала - я действительно работал с контейнером. Оберните изображение в div, установите максимальную высоту / ширину и позвольте изображению (#div img {}) иметь ширину 100% и высоту 100%.
Мэйв
1
Что это за колдовство?! Это круто!
Леонардо Вильдт,
24

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% от области просмотра.

Роберррт-с
источник
Спасибо! Как определить vh и vw, когда у меня есть изображения разных размеров?
Herman
Привет, @HermanToothrot, вы говорите, что хотите сохранить соотношение сторон при использовании единиц просмотра?
roberrrt-s
@Roberrrt говорит, что у меня есть несколько изображений разных размеров во встроенном блоке, и я хочу сохранить соотношение сторон всех из них, но установить для них одинаковую высоту или ширину.
Herman
Либо width: 100%, max-height: 50vh, либо обратное
roberrrt-s
@Roberrrt width: 100%, похоже, не имеет большого эффекта. Мне просто нужно угадать vh, в моем случае 50 - это слишком много, а 40 максимизирует высоту всех изображений.
Herman
11
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

Шахид
источник
6

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

.classname img{
  resize: both;
  width:50px;
  height:25px;
}
fmoradi9
источник
5

Вы используете 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>
Артур Невес
источник
1
jQuery не нужен для такой простой задачи. Почему загрузка 50 КБ + (целая библиотека) выгодна для нескольких строк JS?
1
Конечно, вы совершенно правы, что я s why Iспрашиваю его, использует ли он jQuery, потому что, если он это делает, может быть хорошей идеей просто добавить плагин!
Артур Невес,
так без JS это невозможно? Я нашел такое простое решение, как это unstoppablerobotninja.com/search/… , однако мне не удалось полностью реализовать его в моем шаблоне
успешно
4

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

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

Рин
источник
2

Вы можете использовать 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;
}

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

Шах-Рох
источник
2

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

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

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

Даниэль Ньямасё
источник
0

Пытаться

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

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

Райан Стоун
источник