Наш клиент хочет иметь другое изображение баннера на меньших экранах, чем на больших экранах. Не просто сжимайте/растягивать, чтобы соответствовать, но на самом деле замените другое изображение. Полноразмерное изображение довольно сложно - несколько человек, два логотипа и некоторый декоративный текст - и поэтому для меньшего изображения они хотят вырезать некоторых людей, отбросить логотипы и т.д. Поэтому им нужен самый большой, наиболее сложное изображение для настольных компьютеров, меньшее упрощенное изображение для устройств среднего размера, а затем меньшее и простое для самых маленьких.
Каков наилучший способ сделать это?
Моя первая мысль состоит в том, чтобы включить все три изображения и использовать ширину @media min/max, чтобы сделать две из них невидимыми при любом заданном размере. Как:
@media (max-width: 400px) { .smallimg {display: block} .midimg {display: none} .bigimg {display: none} }
@media (min-width: 401px) and (max-width: 700px) { .smallimg {display: none} .midimg {display: block} .bigimg {display: none} }
@media (min-width: 701px) { .smallimg {display: none} .midimg {display: none} .bigimg {display: block} }
Это должно работать, но оно будет загружать все три изображения каждый раз, что кажется довольно пустой тратой пропускной способности.
Я мог бы изменить изображения из img-тегов на css-фоновые изображения. Будет ли это лучше? Это позволит избежать загрузки всех трех или будет ли это делать?
Я подумывал написать некоторый JavaScript для динамического обновления URL-адреса в теге img на основе размера экрана, но это похоже на сложность.
Я кратко подумал о том, чтобы сделать логотипы и текст отдельными изображениями и разбить фактическое изображение на куски, а затем попытаться собрать их все как перекрывающиеся изображения. Но это звучит, как много работы, чтобы получить право, и тогда я должен убедиться, что он выглядит правильно на всех возможных размерах, не так просто, чтобы просто сжиматься или растягиваться и т.д. И хотя это, вероятно, Я предпочел бы общее решение, которое я смогу использовать в будущем.
Кто-нибудь сделал что-то подобное и получил некоторые идеи о том, как это сделать?
