gpt4 book ai didi

html - 如何在大屏幕上设置背景图片全高宽?

转载 作者:太空宇宙 更新时间:2023-11-04 06:26:45 25 4
gpt4 key购买 nike

  • 我将 .svg 文件作为背景图像。
  • 在小屏幕上没问题,但是当我在大屏幕上显示时,它被从顶部和底部切掉了
  • 我想在大屏和全屏中以全高/全宽显示背景图像作为原始尺寸

演示图片

in large screen

-这是我的代码

.bg {
width: 100%;
height: 540px;
background-image: url(http://inheritxdev.net/Design-Projects/perfit_home/images/OnePager-Header.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
float: left;
width: 100%;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

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

</body>
</html>

最佳答案

您必须使 div 高度 = pageHeight(标题高度和适当的边距应为负)。

.bg{
width: 100%;
height: calc(100vh - (2em + 18px)); /* p tag margin = 2em(1em top, 1em bottom ; p tag height = 18px) */
background-image: url(https://images.unsplash.com/photo-1535498730771-e735b998cd64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80); /* I changed an image because your image not showing in the playground */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
float: left;
border: 1px solid red;
box-sizing: border-box;
}
<p>Resize the browser window to see the effect.</p>
<div class="bg"></div>

关于html - 如何在大屏幕上设置背景图片全高宽?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55023323/

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