Как я могу получить гибкое изображение css с максимальной высотой и шириной при сохранении пропорции изображения без javascript?

Question

Я действительно думал, что это будет в другом месте при переполнении стека, но я искал бесплодно в течение продолжительного времени. Простите меня, если я пропустил это.

У меня есть набор изображений, которые должны быть сделаны как можно большими (ширина: 100% до контейнера elem), пока контейнер не станет слишком широким или изображение слишком высокое из-за ширины контейнера. Соотношение сторон необходимо сохранить.

Я думал, что я мог бы сделать это с

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

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

Есть ли лучший способ сделать это? Я хотел бы избежать javascript, если это возможно. Мои тесты в Firefox 9.

Answer 1

Вы можете использовать медиа-запросы для создания stairstep фиксированных размеров изображения, а затем, как это:

@media screen and (min-width: 701px) and (max-width: 900px) { 
    img { 
     width: 800px; 
     height: auto; 
    } 
} 

@media screen and (min-width: 901px) and (max-width: 1100px) { 
    img { 
     width: 1000px; 
     height: auto; 
    } 
} 

Не очень красиво, но это работает.

Answer 2

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

Вот хорошая статья о нем: http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios