Question

我试图在https://i.imgur.com/GAxG97r.jpg的图像中完整显示该图像，而无需放大。我尝试了多种方法来使图像始终被剪切或放大。这是我当前的结果{ {3}}，该图像从上到下和从左到右滚动。我希望将其缩小，并且只能从上到下滚动。

这是我必须缩小浏览器窗口的预期结果：https://i.imgur.com/yjwVcCN.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;
}

我在体内简单地显示该元素

<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>

Answer 1

您可以使用“ img”标签显示图片吗？这样做，您只需要将其宽度设置为100％（使用CSS或width属性）。高度将适应保持宽高比。

Answer 2

一种实现此目的的方法是将bg的宽度设置为100vw-即视口宽度的100％，然后将background-size设置为{{ 1}}和contain至background-position。您可能需要调整高度值。

top center

.bg {
  background-image: url("https://i.imgur.com/GAxG97r.jpg");
  width: 100vw;
  height: 3800px; 
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}

以全宽度显示图像，您可以上下滚动

2 个答案: