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

我试图设计一个主页为我的网站，即时通讯使用div来显示插图。如何为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画面上完美显示，但在较小的屏幕上会被切断。

我想清楚的一件事是，我希望整个图像始终显示在所有浏览器大小，我不希望它通过高度或宽度被切断。

来源

2016-07-25 drarkayl

使用'背景尺寸：盖;' –

背景尺寸：盖;不起作用，它显示全宽而不是适当的高度。它被后来的因素所切断。 – drarkayl

尝试使用'background-size：contains'背景大小：100％。 –

看来你要求div来填充父（高度或宽度）。如果您不希望背景图像出现裁剪，您需要保持宽高比。

这看起来你需要：Maintain aspect ratio of div but fill screen width and height in CSS?

来源

2016-07-25 13:10:33

不管长宽比如何。 – 3rdthemagical

该链接解决了我的查询。这正是我需要的。谢谢！ – drarkayl

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

来源

2016-07-25 13:03:36

background-size：100％。也不起作用。我看到整个图像的唯一方法是如果我设置'hight：850px;'但是然后我不能调整它的大小 – drarkayl

它在我尝试使用vw和vh单元时起作用。 – drarkayl

工作实例

添加样式背景div的：

background-repeat: no-repeat; 
background-position: center center; 
background-size: cover;

您可以调整窗口中看到的结果。

html, body { 
 
    position: relative; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
div { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    
 
    top: 0; 
 
    left: 0; 
 
    
 
    background: url('http://ghk.h-cdn.co/assets/16/09/980x490/landscape-1457107485-gettyimages-512366437.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
}

<div> 
 

 
</div>

来源

2016-07-25 13:13:36 3rdthemagical

这确实有效，但是当我重新调整大小时，图像被截断。 – drarkayl

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

回答

相关问题