Масштабирование изображения с помощью CSS

Мне это действительно не нужно, но просто из любопытства...

Предположим, что у нас есть макет веб-сайта, который отлично работает на дисплеях 1920px и на небольших смартфонах. Теперь скажем, что у нас есть изображения и, очевидно (очевидно?), Мы хотим их масштабировать. Мы загрузили 2560px-изображения на сервер (потому что кто-то заботится о пропускной способности в настоящее время) и установите для свойства width: 100% тег img.

Итак, у нас есть два пользователя: программист с дисплеем 1920 пикселей, позвоните ему Джо и студентка со смартфоном, позвоните ей Нэнси (потому что с Нэнси все лучше?).

Джо и Нэнси счастливы, потому что наш план с масштабированием изображений с использованием width: 100% работает, но что, если мы решили показать маленькие изображения тоже, например, ширину 400 пикселей? Нэнси ничего не заметит, но для Джо это было бы катастрофой.

Итак, вопрос: можем ли мы сделать Джо и Нэнси счастливыми без использования JavaScript?

Ответы

Ответ 1

Почему бы не пойти вместо max-width: 100%?

Это оставит все изображения, которые меньше ширины экрана, и те, которые шире экрана, будут изменены на 100%. Проблема решена, все счастливы!

Ответ 2

Если вы хотите отправлять разные изображения на разные экраны в зависимости от их ширины, вы должны погрузиться в те запросы условных медиа, о которых мы все еще слышим. Это хороший сайт: http://webdesignerwall.com/tutorials/css3-media-queries

Ответ 3

Я использовал max-width: 100%, как упомянул Филипп, но мне также нужно было включить:

height:auto

В противном случае высота не будет масштабироваться.