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

Question

如果您单击以查看一个非常大的图像比对谷歌的图像屏幕清晰度更高,这样例如http://p1.pichost.me/i/32/1548022.png然后它会显示一个+和-上的光标.在+使图像具有原始尺寸,同时-使图像适应屏幕,but not the full screen,所以没有滚动条显示.我尝试在我的css代码上实现这最后一部分,但我没有取得多大成功,我尝试了设置overflow-x:hidden;,overflow-y:hidden;但这给出了原始的不可滚动的大小.我该怎么办？泰

Answer 1

如果使用CSS背景而不是<img>元素,则更容易.我们将使用该background-size: contain属性来实现您正在寻找的大小.除了IE8之外,所有最近的现代浏览器都支持这种属性 - 值组合.

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>