Адаптивные IMG сохраняют размеры

Question

У меня есть адаптивный веб-сайт, где я изменяю размеры всех своих изображений в соответствующих окнах просмотра медиа-запроса CSS3. Мне интересно, есть ли более простой способ заявить, что я хочу, чтобы все мои изображения изменяли размеры, сохраняя свои первоначальные заявленные размеры, а не вручную изменяя размеры каждого соответственно с max-height, width и т. Д.

EG Ниже.

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {

#logoimg { max-height: 100px; max-width: 100px; }

}

Answer 1

Я считаю, что объявление img {max-width: 100%} должно сработать. Изображение будет уменьшаться и сохранять свои размеры.

Answer 2

Использовать фоновый размер: содержать; или размер фона: обложка; при необходимости.

Answer 3

использовать элемент изображения http://caniuse.com/picture

руководство http://www.html5rocks.com/en/tutorials/responsive/picture-element/

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

Answer 4

Это то, что нужно для того, что обычно называют изображениями жидкости :

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

Первое объявление гарантирует, что все изображения не будут превышать ширину содержащего их элемента. Автоматическое объявление высоты гарантирует, что все изображения сохранят свои пропорции при уменьшении, даже если у них есть атрибуты размера в элементе img.

Таким образом, вы можете просто объявить width или max-width для элемента контейнера img, не беспокоясь о размерах / пропорциях.