HTML中的圖片如何自適應螢幕？這篇文章有圖片的自適應用法介紹

本篇文章主要的介紹了關於HTML中的圖片是如何自適應螢幕的，還有關於圖片只適應移動端的方法和執行個體，最後還有背景圖片的調整方法介紹。接下來讓我們一起來看看吧

首先我們看看HTML中的圖片是如何自適應螢幕的：

讓圖片自適應螢幕大小最簡單的方法，保證管用，你把那個圖片寫在div裡面的背景裡，也就是background:url(../img/1.jpg) center no-repeat;

這樣就能夠自適應螢幕大小了，而且不會出現橫向的捲軸

首先是設定background:url(圖片地址) 0 0 no-repeat scroll transparent;background-size:100% 100%;

<div class="msg_desc"><img style="max-width:100%;overflow:hidden;" src="http://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""></div>

這裡就把圖片固定在msg_desc裡面了，方便吧。

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

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

width:auto;是寬度自動的意思。

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

還有一種如何讓網頁圖片寬度和高度自適應的方法：

在我們設計網頁的時候，經常會遇到圖片自適應問題，實際這些工作完全可以交給瀏覽器來完成就可以了，只可惜，無論是IE還是FIREFOX在圖片自適應這個問題上都處理的不盡人意，網上實現網頁圖片寬度和高度的方法也很多。

今天介紹的這種是使用CSS來完成，根據實際的應用效果來說，使用Javascript還是比較靠譜一點，因為CSS的expression的確有點煩，小編是指使用效果上有點惱人，僅供大家參考使用。

使用CSS實現圖片的自適應

使用CSS實現圖片自適應很簡單，主要靠兩個參數來完成，分別是max-width和max-height，這兩個參數在FIREFOX和IE7以 上支援都很好，但是在IE6上面，效果非常糟糕，尤其是對於多張圖片的顯示，第一次顯示網頁大都很難達到圖片自適應的效果，一般都是有些能自適應，有些不 能自適應，多次重新整理可能又顯示OK，就是這點就足夠煩人，而且一旦顯示多張圖片，IE 6上就卡的要命（expression在IE上比較佔用資源，感覺設計是用來玩得，FIREFOX自適應效果還是比較好，速度也非常快），反正筆者至今是 沒有找到更好的CSS方法來讓IE 6完美支援圖片自適應。

範例程式碼如下：

img{    max-width: 128px;    max-height: 128px;    height:auto;    zoom:expression( function(e) {if(e.width>e.height) {if (e.width>128) { e.height = e.height*(128 /e.width); e.width=128; }}else {if (e.height>128) { e.width = e.width*(128 /e.height); e.height=128; }}e.style.zoom = '1';     }(this));         overflow:hidden; }

上面代碼格式上需要特別注意兩點：

• zoom屬性裡寬高賦值不能帶單位（如px），否則無效；

• if和else語句也必須帶大括弧括起來，單句指令也不行（而在很多程式設計語言裡，單句指令可以無需大括弧）；

最後一個种放置背景圖片的方法：

首先看你的背景圖片大小，如果很大的話，一般情況下很多顯示器都會顯示的合適。

如果是想適應行動裝置的，用一個CSS3屬性

background-size:cover;

就可以了，可以將背景圖根據視窗大小鋪滿整個瀏覽器視窗。

好了，以上就是這篇關於HTML中的圖片自適應的三個常用的應用方法了，有問題的可以在下方提問。