html - 如何为 div 设置背景并根据浏览器大小调整大小？

Question

我正在尝试为我的网站设计主页，其中我使用 div 来显示插图。

我想在 div 中使用覆盖整个 div 大小的图像。

图像尺寸为 1920x850。

这是div的代码

<div class="custom-col col-md-12 col-sm-12"  id="widget-static-block-1"></div>

CSS:

#widget-static-block-1 {
 background: url({{ d_banner1.jpg' | asset_url }}); 
 width:100%; }

我希望能够在不同的屏幕尺寸上查看图像，但它总是被截断(高度或宽度)

我试过调整高度和宽度属性，但没有成功。

如果我设置 height:850px; 那么显然它在 1080p 屏幕上显示完美，但在较小的屏幕上被截断。

我想澄清的一件事是，我希望整个图像在所有浏览器尺寸下始终显示，我不希望它因高度或宽度而被截断。

Answer 1

试试 background-size: 100% 100% 或 background-size: 100vw 100vh。如果您想确定您的 div 适合所有媒体，您可以使用 vw 和 vh 单位。