gpt4 book ai didi

html - 使用 max-width 将容器调整为窗口高度

转载 作者:太空宇宙 更新时间:2023-11-03 18:27:29 27 4
gpt4 key购买 nike

我正在尝试使用最大宽度的包装器构建一个页面:700px

最理想的情况是,页面会响应并调整图像大小以适应窗口。我真的很难让浏览器调整图像和容器的大小以适应窗口高度。宽度似乎可以很好地缩放。最终,用户无需向下滚动即可查看页面。如果没有 JavaScript,这可能吗?如果没有,有人可以指出我正确的方向吗?谢谢!代码如下:

jsfiddle:http://jsfiddle.net/LTchE/

<style type="text/css">
body, html {
height: 100%;
margin: 0px auto;
padding: 0px auto;
}
#wrapper {
height: auto;
min-height: 100%;
margin: 0px auto;
padding: 0px auto;
max-width: 600px;
background: #de291e;
}
.happyHolidays {
background: url('http://placehold.it/600x80') no-repeat center;
background-size: contain;
width: 90%;
height: 80px;
margin: 0 auto;
display: block;
}
.fromMe {
background: url('http://placehold.it/600x80') no-repeat center;
background-size: contain;
width: 90%;
height: 80px;
margin: 0 auto;
display: block;
}
.buttons {
text-align: center;
}
.snowperson {
text-align: center;
}
.snowperson img {
width: 100%;
}
</style>
</head>

<body>
<div id="wrapper">
<div class="happyHolidays"></div>
<div class="fromMe"></div>
<div class="snowperson">
<img src="http://placehold.it/650x750" name="snowperson" border=0>
</div>
<div class="buttons">
<a href="javascript:NextImage()">
<img src="http://placehold.it/150x50" alt="Next snowperson">
</a>
</div>
</div>

</body>

最佳答案

使用Overflow:hidden 来包装类把Wrapper类给overflow:hidden你的滚动条被隐藏了

关于html - 使用 max-width 将容器调整为窗口高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20534983/

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