gpt4 book ai didi

html - 100% 宽度背景图像顶部截断

转载 作者:太空宇宙 更新时间:2023-11-03 22:55:22 25 4
gpt4 key购买 nike

当我对 1920x1080 图片(或我试过的其他分辨率)使用以下图片时,图片的最顶部被截断。有什么办法可以防止这种情况发生吗?

div.background {
background-image: url("/images/home.jpg");
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 100%;
margin-top: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
background-position: 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

div.header {
background-color: red;
width:100%;
height: 100;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
padding: 0px 0px 0px 0px;

}

body {
margin: 0px 0px 0px 0px;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main2.css">
</head>
<body>
<div class="header"></div>
<div class="background"></div>
</body>
</html>

最佳答案

这就是 background-size: cover 所做的,使您的背景图像在保持纵横比的同时缩放以覆盖其整个容器。如果图像的纵横比与 div 不匹配,则会出现裁剪。

如果你能保证你的背景图片总是有相同的纵横比,你可以这样做:

div.background {
background-image: url("/images/home.jpg");
background-repeat: no-repeat;
position: absolute;

/* these lines are the important bits */
height: 0;
padding-bottom: 56.25%;
box-sizing: border-box;

width: 100%;
margin-top: 100px;
top: 0;
/* bottom: 0; */
left: 0;
/* right: 0; */
z-index: 0;
background-position: 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

相对填充和边距都是基于宽度,而不是高度。使用该特定百分比会导致 div 的宽高比与图像匹配,即 16:9。具有相同的宽高比意味着在使用 cover 时不会发生裁剪。参见 this answer关于这个话题。

border-box 导致 heightwidth 包含 paddingborder 大小而不是 margin 大小,防止 margin 影响 div 的尺寸。

关于html - 100% 宽度背景图像顶部截断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38648062/

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