CSS - 使图像适合屏幕，这样就不会出现滚动条

Question

如果您点击查看谷歌图像上高于屏幕分辨率的非常大的图像，例如 http://p1.pichost.me/i/32/1548022.png然后光标上会出现一个+和-。 + 使图像保持原始大小，而 - 使图像适合屏幕，但不是全屏，这样就不会出现滚动条。我尝试在我的 css 代码上实现最后一部分，但没有取得太大成功，我尝试设置 overflow-x:hidden; 和 overflow-y:hidden;但这给出了原始的不可滚动大小。我应该怎么办？泰

Answer 1

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

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

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>