1. 首頁
  2. 問答
  3. CSS縮放背景圖像

CSS縮放背景圖像

2011-04-23 217 views
4

我可以縮放圖像，以填補窗口時，他們的內容，像這樣： （沒有任何HTML5或DIV）CSS縮放背景圖像

<style type="text/css"> 
img { 
width:100%; 
height:100%; 
margin:0px; 
} 
    </style>

和

<img src="wacard.png" alt="original image" title="">

但

這個失敗（包括「html，body」和「body」）

<style type="text/css"> 
body { 
width:100%; 
height:100%; 
margin:0px; 
} 
    </style>

和

<body 
style="background-image: url(wacard.png);"> 
</body>

如拿起從這裏撿到：Resize HTML5 canvas to fit window但據我所瞭解，必須有一些更有趣的代碼比我知道的，怎麼回事，...或者我做有什麼不對...

我怎樣才能獲得背景圖像的規模？ （理想情況下，無javascript）

來源

2011-04-23 digit

回答

8

這裏是一個偉大的教程有幾種解決方案： http://css-tricks.com/perfect-full-page-background-image/ 完成與演示，並一步一步的編碼過程。

提到的HTML5的方法是：

html { 
     background: url(images/bg.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
}

有一個，即在文章中提到弄不好。

來源

2011-04-23 20:50:42 jackreichert

+1

哈哈，你在我之前發佈了同樣的文章1秒:) – Maverick 2011-04-23 20:53:49

+0

沒有開玩笑。 CSS技巧是一個非常有用的網站。 – jackreichert 2011-04-23 20:55:17

相關問題

 相關問題