Question

如果您点击在Google图片上查看高于屏幕分辨率的非常大的图片，例如http://p1.pichost.me/i/32/1548022.png，则光标上会显示+和-。 +使图片具有原始大小，而-使图片适合屏幕but not the full screen，因此不会显示滚动条。我尝试在我的css代码上实现最后一部分，但我没有取得多大成功，我尝试设置overflow-x:hidden;和overflow-y:hidden;，但这给出了原始的不可滚动大小。我该怎么办？ TY

Answer 1

如果使用CSS背景而不是<img>元素，则会更容易。我们将使用background-size: contain属性来实现您正在寻找的大小。除IE8外，all recent modern browsers support this property-value combination。

p / s：您可以根据需要更改图像容器的尺寸，但我使用视口单元来最好地说明示例。

body {
  margin: 0;
  padding: 0;
  }
div.img {
  background-image: url('http://p1.pichost.me/i/32/1548022.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100vw;
  height: 100vh;
  }

<div class="img"></div>

Answer 2

首先，您需要设置正文的宽度和高度或图像的外部div或元素

body or #div{
width:100vw;
height:100vh;
}

然后将img宽度和高度设置为100％或将背景大小设置为100％100％

Answer 3

如果在<img>上绑定图像，则通过设置

使该图像元素变得灵活

/* your css and you img */
#your-image { 
    width:100%;
    height:100%; 
}

如果将某个元素上的图像绑定为背景......

/* your css and your element */
#some-element { 
    background-image:url(/*path*/);
    background-size:100% 100%;
}

看起来您只想在页面中显示整个大图像。所以你的<body>元素或嵌套的包装元素将是css

的良好候选者

CSS - 使图像适合屏幕，因此不会出现滚动条

3 个答案: