gpt4 book ai didi

html - 如何根据屏幕尺寸缩放 div 中的背景图像

转载 作者:行者123 更新时间:2023-12-02 00:47:32 24 4
gpt4 key购买 nike

我想在我的网站中的一个 div 中添加一个背景图像,该 div 应该可以在所有设备上完美地调整大小。我尝试了最简单的方法,如“高度:100%”,但那根本不起作用。我还尝试了媒体查询,这当然有效但相当复杂,所以我想问问是否有更简单的方法来解决这个问题。

这是 HTML

<div class="bg"></div>

这就是 CSS

.bg {
background: url('bg.jpg') no-repeat center cover;
}

最佳答案

@Sqnkov 的答案是正确的。空的 div 将适用于该设置。

尝试运行下面的代码看看。 (使其成为整页并调整浏览器大小)。center center 使 Y 轴和 X 轴居中。 background-size: cover; 使图像覆盖所有可用空间。如果您想确保整个图像都在 View 中,请改用 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% 高度/宽度而不是 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>

关于html - 如何根据屏幕尺寸缩放 div 中的背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42653155/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com