Как я могу иметь гибкий размер изображения CSS с максимальной высотой и шириной, сохраняя соотношение сторон изображения, без JavaScript?

Question

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

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

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

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

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

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

Answer 1

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

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

Answer 2

Вы можете использовать медиазапросы, чтобы создать лестницу с фиксированными размерами изображения, и затем выполнить следующие действия:

@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;
    }
}

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