我正在尝试显示此图像 https://i.imgur.com/GAxG97r.jpg在没有放大的情况下完整显示网页。我尝试了很多方法，但总是被剪切或过度放大。这是我当前的结果 https://i.imgur.com/yjwVcCN.jpg此图像可从上到下和从左到右滚动。我希望它被缩小并且只能从上到下滚动。
这是我必须缩小浏览器窗口的预期结果:https://i.imgur.com/ltk1RDL.jpg
这是我当前的 CSS:
.bg {
background-image: url("https://i.imgur.com/GAxG97r.jpg");
width: 2880px;
height: 3800px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
我在我的 body 里简单地使用这个来显示那个元素
<div class="bg"></div>
我确信解决这个问题的方法非常简单，但经过大量研究并且无法从头开始 HTML，我想问一下是否可以简单地以全宽显示它，从上到下滚动。
这是完整的代码。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
}
.bg {
background-image: url("https://i.imgur.com/GAxG97r.jpg");
width: 2880px;
height: 3800px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
最佳答案
您可以使用“img”标签来显示您的图片吗？ 为此，您只需将其宽度设置为 100%(使用 CSS 或 width 属性)。 高度将适应以保持纵横比。
关于html - 全宽显示图像，您可以上下滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55632719/