如果您單擊以查看比您的屏幕資源高的谷歌圖像上的一個非常大的圖像,例如http://p1.pichost.me/i/32/1548022.png那麼它出現在光標上+
和-
。 +
使圖像具有其原始大小,而-
使圖像適合屏幕but not the full screen
,以便不出現滾動條。我嘗試在我的css代碼中實現這最後一部分,但我沒有取得太大的成功,我嘗試設置overflow-x:hidden;
和overflow-y:hidden;
,但是這給出了原始的不可滾動的大小。我該怎麼辦?泰CSS - 使圖像適合屏幕,以便不出現滾動條
2
A
回答
5
如果使用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>
+1
這裏沒有真正提到,但實際上使滾動條消失的事實是,你已經設置了'margin:0;填充:0;'爲身體,而不是任何圖像/ bg規格..我想提到那些碰到這個,像我一樣,通過搜索.. – Julius
0
如果綁定上<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
1
首先一個很好的候選人,你需要設置寬度和身體或圖像
body or #div{
width:100vw;
height:100vh;
}
然後設置的外層div或元素的高度你img寬度和高度到100%或背景大小到100%100%
相關問題
- 1. 中斷字,以便它適合屏幕
- 2. Android Gallery圖像onTouch以適合屏幕
- 3. Android,如何使圖像適合屏幕?
- 4. 如何適合沒有滾動屏幕?
- 5. Blackberry - 滾動屏幕時出現背景圖像
- 6. 滾動android屏幕上的圖像屏幕上的圖像
- 7. CSS:使容器適合屏幕
- 8. 屏幕尺寸壁紙適合圖像
- 9. iOS適合屏幕的圖像
- 10. WebView中的圖像適合屏幕
- 11. Flex mx:圖像適合屏幕
- 12. 的jQuery/CSS - 適合元素屏(無H-滾動條)
- 13. 設置CSS margin-top,以便內容在滾動前不會出現在任何設備的屏幕上?
- 14. 圖像自動調整大小與屏幕高度,沒有滾動條 - CSS
- 15. HTML/CSS流程圖不適合屏幕視圖
- 16. 適合屏幕的Android Web應用程序(出現橫向滾動)
- 17. SpriteKit使圖像適合屏幕,而不是延伸過去
- 18. Swift - 滾動視圖適合整個屏幕?
- 19. jquery移動彈出ui彈出屏幕不滾動時滾動
- 20. 我想調整圖像的大小以適合任何屏幕
- 21. 滾動條不顯示整個屏幕
- 22. 滾動條不顯示整個屏幕
- 23. 適合屏幕
- 24. 圖像滾動整個屏幕
- 25. UIlabel動畫不適合在屏幕上
- 26. Cardview不適合屏幕
- 27. 佈局不適合屏幕
- 28. Bootstrap Modal不適合屏幕
- 29. Smartgit Ubuntu不適合屏幕
- 30. Android Animate Scale圖像以適合屏幕寬度和高度
設置溢出'hidden'只會隱藏圖像的一部分,但你想縮放以適應屏幕,不是嗎? – wil93
是的,但通過在網上搜索合適的屏幕給所有結果適合確切的全屏 – darkchampionz