gpt4 book ai didi

html - CSS:将可滚动图像拉伸(stretch)到用户窗口的 100%

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

我有一个设计师的模型,我想与我的同事分享以获得批准,我希望图像填充浏览器的用户访问宽度,但允许像网站一样滚动。

我已经尝试使用以下 CSS 代码来做到这一点:

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin:0;
}
html, body, .image {
position:relative;
width:100%;
background-image:url('05.jpg');
background-size:cover;
}
</style>
</head>
<body>
<div class='image'></div>
</body>
</html>

The result是一张 100% 填充宽度但不允许滚动的图像,保留 image 的其余部分隐。我怎样才能只填充页面的宽度,但允许滚动浏览图像的其余部分?

我发现这个类似 question但无法使用共享的代码让它工作。

最佳答案

为什么不像这样将图像用作常规图像:

body {
margin: 0;
}

.x > img {
width: 100%;
height: auto;
}
<body>
<div class='x'>
<img src="http://placehold.it/2000x2500/fc0">
</div>
</body>

这是一个具有相同代码的代码笔(片段当前显示错误消息“服务不可用”):

https://codepen.io/anon/pen/XgVBKg

关于html - CSS:将可滚动图像拉伸(stretch)到用户窗口的 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44814261/

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