怎麼用簡單的代碼實現圖片自適應的展示效果？（css程式碼範例）

在建設網站時，基本都會要求網站有能自適應的效果，那麼其中實現圖片自適應是一個非常重要的操作。一張圖片的顯示，離不開寬和高這兩個值 。首先我們需要瞭解css中關於圖片寬高值屬性的相關知識點。這裡給大家簡單的總結一下。

1、width 屬性設定元素的寬度。這個屬性定義元素內容區的寬度。

可能值有：auto 自動寬度；length px、cm 等單位定義的寬度； % 百分比寬度；inherit 規定應該從父元素繼承 width 屬性的值。

2、height 屬性設定元素的高度。這個屬性定義元素內容區的高度。

可能的值有：auto 自動高度。 length px、cm 等單位定義高度。% 百分比高度。inherit 規定應該從父元素繼承 height 屬性的值。

一、css背景圖片自適應螢幕代碼如下（通過background-image: ()引入圖片）：

.img{width: 100%;height: 100%;background-position: center;background-size:cover;background-repeat: no-repeat;}background-image: url(圖片路徑);

上述代碼就可以讓css圖片自適應不變形，這裡的原理就是設定百分比。

二、css圖片自適應螢幕代碼如下（通img標籤引入圖片）：

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

上述代碼就可以讓img圖片自適應div大小即螢幕大小。這裡注意的是使用width:auto;即是寬度自動的意思。
那麼\9是hack css 的一種寫法，這種在正常css代碼後面加"\9"的方式，只有IE瀏覽器才能識別，其他瀏覽器會忽略這條語句。這樣就能做到差異化瀏覽器，來達到相容瀏覽器的目的。

本篇文章關於css怎麼讓圖片自適應的介紹，希望對有需要的朋友有所協助。