Растяжка изображения для разных размеров экрана

Question

Я не был уверен в том, что искать мой ответ. В принципе у меня есть дизайн, и заголовок можно увидеть here.

Ширина документа - 1200. Я могу получить большую версию ширины до 2560, но как мне использовать изображение? Должен ли я использовать мультимедийные запросы CSS и использовать разные изображения для определенного размера экрана? Примечание: это не мобильный дизайн сайта; Мне просто нужно работать со всеми экранами компьютеров.

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

Answer 1

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

Answer 2

Если это изображение переднего плана, просто используйте процентную ширину. Если это фоновое изображение, вы можете использовать атрибут background-size.

Answer 3

попробовать это

background-size: 100% 100%; 

Answer 4

Взгляните на эту script. Он в основном определяет размер экрана, а затем загружает соответствующий css, где вы можете использовать изображения, соответствующие экрану.

Изменение размера фона в% не является хорошим вариантом (проще всего), так как браузер будет загружать полное изображение (наибольшее) в любом случае, а затем масштабировать его в соответствии с размером. Это может ухудшить производительность загрузки страницы, если вы используете большие изображения.