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单位。

Answer 2

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

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

Answer 3

工作示例

使用背景为div添加样式：

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

您可以调整窗口大小以查看结果。

＆＃13;

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;
}

＆＃13;

<div>

</div>

＆＃13;

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

3 个答案: