CSS - 使图像适合屏幕，以便不出现滚动条

问题描述：

如果您单击以查看比您的屏幕资源高的谷歌图像上的一个非常大的图像，例如http://p1.pichost.me/i/32/1548022.png那么它出现在光标上+和-。 +使图像具有其原始大小，而-使图像适合屏幕but not the full screen，以便不出现滚动条。我尝试在我的css代码中实现这最后一部分，但我没有取得太大的成功，我尝试设置overflow-x:hidden;和overflow-y:hidden;，但是这给出了原始的不可滚动的大小。我该怎么办？泰CSS - 使图像适合屏幕，以便不出现滚动条

设置溢出'hidden'只会隐藏图像的一部分，但你想缩放以适应屏幕，不是吗？ – wil93

是的，但通过在网上搜索合适的屏幕给所有结果适合确切的全屏 – darkchampionz

答

如果使用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>

这里没有真正提到，但实际上使滚动条消失的事实是，你已经设置了'margin：0;填充：0;'为身体，而不是任何图像/ bg规格..我想提到那些碰到这个，像我一样，通过搜索.. – Julius

答

如果绑定上<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

答

首先一个很好的候选人，你需要设置宽度和身体或图像

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

然后设置的外层div或元素的高度你img宽度和高度到100％或背景大小到100％100％

CSS - 使图像适合屏幕，以便不出现滚动条

相关推荐