CSS - 使圖像適合屏幕，以便不出現滾動條

如果您單擊以查看比您的屏幕資源高的谷歌圖像上的一個非常大的圖像，例如http://p1.pichost.me/i/32/1548022.png那麼它出現在光標上+和-。 +使圖像具有其原始大小，而-使圖像適合屏幕but not the full screen，以便不出現滾動條。我嘗試在我的css代碼中實現這最後一部分，但我沒有取得太大的成功，我嘗試設置overflow-x:hidden;和overflow-y:hidden;，但是這給出了原始的不可滾動的大小。我該怎麼辦？泰CSS - 使圖像適合屏幕，以便不出現滾動條

來源

2015-11-07 darkchampionz

設置溢出'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>

來源

2015-11-07 11:42:13 Terry

這裏沒有真正提到，但實際上使滾動條消失的事實是，你已經設置了'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

來源

2015-11-07 01:40:33 hina10531

首先一個很好的候選人，你需要設置寬度和身體或圖像

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

然後設置的外層div或元素的高度你img寬度和高度到100％或背景大小到100％100％

來源

2015-11-07 11:37:30

CSS - 使圖像適合屏幕，以便不出現滾動條

回答

相關問題