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

Question

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

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

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

Answer 1

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

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

Answer 2

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

Answer 3

попробуйте

 background-size: 100% 100%;

Answer 4

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