怎麼用css使圖片自適應螢幕？

本篇文章主要介紹了如何?css圖片自適應螢幕的效果。對於新手來說最簡單的方法，即圖片寫在div裡面的背景裡。這樣就能自適應螢幕大小且不會出現橫向的捲軸。

css圖片自適應螢幕程式碼範例如下：

background:url(1.jpg) center no-repeat;background:url(圖片地址) 0 0 no-repeat scroll transparent;background-size:100% 100%;/* 圖片固定在ims裡面*/<div class="ims"><img style="max-width:100%;overflow:hidden;" src="1.jpg" alt=""></div>

註：在html裡面插入圖片，如果想讓圖片自適應螢幕的小而不是寬高固定不變可以在css代碼裡加入

img { height: auto; width: auto\9; width:100%; }

\9是hack css 的一種寫法，這種在正常css代碼後面加"\9"的方式，只有IE瀏覽器才能識別，其他瀏覽器會忽略這條語句。這樣就能做到差異化瀏覽器，來達到相容瀏覽器的目的。