gpt4 book ai didi

html - 流体(背景)图像按页面宽度缩放

转载 作者:行者123 更新时间:2023-11-28 07:48:00 26 4
gpt4 key购买 nike

我的网站有后台问题。我们的想法是不使用任何媒体查询,而是将所有内容都设置在 % 上,以便它始终可以在任何设备上查看。

我的问题是,背景图像确实具有适用于 with 的正确 css,但高度由 div 中的内容决定。我希望高度始终处于最大值并按比例缩放。

所以我做了以下事情:

<body>
<div class="wrapper">
<div class="home_header">
<div class="home_header_quote">
<img src="images/home_header_quote.png" />
</div>
</div>
</div>
</body>

和我的 CSS

.wrapper{
max-width:1400px;
margin:0 auto;
}

.home_header{
background:url(../images/header_home.png) no-repeat;
background-size: 100% 100%;
max-width:1400px;
max-height:320px;
}

.home_header_quote{
max-width:100%;
height:auto;
}

我希望任何人都可以为我提供一个非JQuery的解决方案

最佳答案

更改背景大小以覆盖。

.home_header{
background:url(../images/header_home.png) no-repeat;
background-size: cover;
max-width:1400px;
max-height:320px;
}

关于html - 流体(背景)图像按页面宽度缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30599588/

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