идеальная ширина фоновых изображений на разных экранах и устройствах

Question

1

Интересно, как правильно подогнать фоновые изображения, такие как Apple.com, на разных размерах экрана и устройствах (см. Пример)

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

Изображение составляет 2560x882, а ширина MBP - 1045px.

Я также заметил, что при очень высоком разрешении они меняют изображение на более крупное, что вдвое больше. Как я могу добиться этого?

Victor 11 сен. 2017, в 10:57

0

возможно, они используют изображения разного размера в зависимости от ширины экрана или типа устройства, используя смесь медиа-запросов и javascript.
sissy 11 сен. 2017, в 09:15
0

Вы должны использовать изображения SVG, чтобы соответствовать любому размеру экрана и любого разрешения.
Rohan Fating 11 сен. 2017, в 09:37
1

@sissy Sissy Да, я думаю, медиа-запросы это путь ...
Victor 11 сен. 2017, в 09:50

Показать ещё 1 комментарий

Теги:

background-image

responsive-design

1 ответ

возможно, они используют изображения разного размера в зависимости от ширины экрана или типа устройства, используя смесь медиа-запросов и javascript.
Вы должны использовать изображения SVG, чтобы соответствовать любому размеру экрана и любого разрешения.
@sissy Sissy Да, я думаю, медиа-запросы это путь ...

xaid · Answer 1 · 2017-09-11T08-50-00.000Z

Для изображений, которые вы можете использовать

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

Для фонового изображения вы используете:

div { background-size:cover; } /* background-size: "contain" | "100%/100%" | "100%" is also an option according to requirement. */