如何根据屏幕尺寸缩放 div 中的背景图片
How to scale a background image in a div responsively to the screen size
我想在我的网站 div 中添加一个背景图片,它应该可以在所有设备上完美调整大小。我尝试了像 "height: 100%" 这样最简单的方法,但那根本不起作用。我还尝试了媒体查询,这当然有效,但相当复杂,所以我想问问是否有更简单的方法来解决这个问题。
这是HTML
<div class="bg"></div>
那就是 CSS
.bg {
background: url('bg.jpg') no-repeat center cover;
}
我还在学习自己,但是你在你的 CSS 中尝试过 "background-size: cover;" 了吗?
在此处查看更多信息:https://www.w3schools.com/cssref/css3_pr_background-size.asp。
只需将大小首选项应用于您的背景 属性。这是 shorthand 用法:
This is a setting for a big background image that fills its parent to the borders.
background: url('images/image.jpg') no-repeat center center/cover;
等于:
background-image: url('images/image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
我建议 this MDN thread 读一读。
我刚刚发现你确实可以使用 "height" 并将其设置为 100,但不能 '%'但是 'vh'.
height: 100vh;
@Sqnkov 有正确答案。空 div 将适用于该设置。
试试 运行 下面的代码看看。 (使其成为整页并调整浏览器大小)。
center center
使 Y 轴和 X 轴居中。 background-size: cover;
使图像覆盖全部可用 space。如果您想确保整个图像都在视图中,请改用 background-size: contain;
。
body{
margin: 0; /* Stripping out margin and padding so .bg can be full width*/
padding: 0;
}
.bg {
box-sizing: border-box; /*Not necessary in this situation*/
display: block; /*Not necessary, but we do want it this way*/
width: 100vw; /*Not necessary, but we do want it this way*/
height: 100vh; /*Necessary. 100vh = 100% of the viewport height*/
padding: 0; /* No padding */
margin: 0; /* No margins */
background: url('https://images6.alphacoders.com/405/405948.jpg') no-repeat center center;
/* Shorthand: image, repeat, X align, Y align. */
background-size: cover; /* Cover all available space*/
}
<div class="bg"></div>
或者,如果您指定父容器的 (html, body
) 高度和宽度为 100%,您可以使用 100%
height/width 而不是 100vh/vw
子 .bg
容器的百分比是相对于父容器的百分比。
参见下面的示例:
html, body{
margin: 0; /* Stripping out margin and padding so .bg can be full width*/
padding: 0;
width: 100%; /*Setting parent width -- child width is relative*/
height: 100%; /*Setting parent height -- child height is relative*/
}
.bg {
box-sizing: border-box; /*Not necessary in this situation*/
display: block; /*Not necessary, but we do want it this way*/
width: 100%;
height: 100%; /* Now 100% height will work */
padding: 0; /* No padding */
margin: 0; /* No margins */
background: url('https://images6.alphacoders.com/405/405948.jpg') no-repeat center center;
/* Shorthand: image, repeat, X align, Y align. */
background-size: cover; /* Cover all available space*/
}
<div class="bg"></div>
我想在我的网站 div 中添加一个背景图片,它应该可以在所有设备上完美调整大小。我尝试了像 "height: 100%" 这样最简单的方法,但那根本不起作用。我还尝试了媒体查询,这当然有效,但相当复杂,所以我想问问是否有更简单的方法来解决这个问题。
这是HTML
<div class="bg"></div>
那就是 CSS
.bg {
background: url('bg.jpg') no-repeat center cover;
}
我还在学习自己,但是你在你的 CSS 中尝试过 "background-size: cover;" 了吗?
在此处查看更多信息:https://www.w3schools.com/cssref/css3_pr_background-size.asp。
只需将大小首选项应用于您的背景 属性。这是 shorthand 用法:
This is a setting for a big background image that fills its parent to the borders.
background: url('images/image.jpg') no-repeat center center/cover;
等于:
background-image: url('images/image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
我建议 this MDN thread 读一读。
我刚刚发现你确实可以使用 "height" 并将其设置为 100,但不能 '%'但是 'vh'.
height: 100vh;
@Sqnkov 有正确答案。空 div 将适用于该设置。
试试 运行 下面的代码看看。 (使其成为整页并调整浏览器大小)。
center center
使 Y 轴和 X 轴居中。 background-size: cover;
使图像覆盖全部可用 space。如果您想确保整个图像都在视图中,请改用 background-size: contain;
。
body{
margin: 0; /* Stripping out margin and padding so .bg can be full width*/
padding: 0;
}
.bg {
box-sizing: border-box; /*Not necessary in this situation*/
display: block; /*Not necessary, but we do want it this way*/
width: 100vw; /*Not necessary, but we do want it this way*/
height: 100vh; /*Necessary. 100vh = 100% of the viewport height*/
padding: 0; /* No padding */
margin: 0; /* No margins */
background: url('https://images6.alphacoders.com/405/405948.jpg') no-repeat center center;
/* Shorthand: image, repeat, X align, Y align. */
background-size: cover; /* Cover all available space*/
}
<div class="bg"></div>
或者,如果您指定父容器的 (html, body
) 高度和宽度为 100%,您可以使用 100%
height/width 而不是 100vh/vw
子 .bg
容器的百分比是相对于父容器的百分比。
参见下面的示例:
html, body{
margin: 0; /* Stripping out margin and padding so .bg can be full width*/
padding: 0;
width: 100%; /*Setting parent width -- child width is relative*/
height: 100%; /*Setting parent height -- child height is relative*/
}
.bg {
box-sizing: border-box; /*Not necessary in this situation*/
display: block; /*Not necessary, but we do want it this way*/
width: 100%;
height: 100%; /* Now 100% height will work */
padding: 0; /* No padding */
margin: 0; /* No margins */
background: url('https://images6.alphacoders.com/405/405948.jpg') no-repeat center center;
/* Shorthand: image, repeat, X align, Y align. */
background-size: cover; /* Cover all available space*/
}
<div class="bg"></div>