Растягивайте и масштабируйте изображение CSS в фоновом режиме - только с помощью CSS

Question

Я хочу, чтобы мое фоновое изображение растягивалось и масштабировалось в зависимости от размера области просмотра браузера.

Я видел несколько вопросов о переполнении стека, которые выполняют эту работу, например Растягивание и масштабирование фона CSS , например. Это хорошо работает, но я хочу разместить изображение, используя background, а не тег img.

В этот тег помещается тег img, а затем с помощью CSS мы отдаем дань тегу img.

width:100%; height:100%;

Это работает, но этот вопрос немного устарел и утверждает, что в CSS 3 изменение размера фонового изображения будет работать довольно хорошо. Я попробовал этот пример первый , но у меня не получилось.

Есть ли хороший способ сделать это с помощью объявления background-image?

Answer 1

Вы хотите добиться этого, используя только одно изображение? Потому что на самом деле вы можете сделать что-то похожее на растягивание фона, используя два изображения. PNG изображения, например.

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