HTML中的圖片如何自適應屏幕？這篇文章有圖片的自適應用法說明

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

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

這樣就能夠自適應屏幕大小了，而且不會出現(xiàn)橫向的滾動條

首先是設置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.cnhttp://img6-2.22122511.com/upload/web_2/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瀏覽器才能識別，其他瀏覽器會忽略這條語句。這樣就能做到差異化瀏覽器，來達到兼容瀏覽器的目的。

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

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

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

使用CSS實現(xiàn)圖片的自適應

使用CSS實現(xiàn)圖片自適應很簡單，主要靠兩個參數(shù)來完成，分別是max-width和max-height，這兩個參數(shù)在FIREFOX和IE7以 上支持都很好，但是在IE6上面，效果非常糟糕，尤其是對于多張圖片的顯示，第一次顯示網(wǎng)頁大都很難達到圖片自適應的效果，一般都是有些能自適應，有些不 能自適應，多次刷新可能又顯示OK，就是這點就足夠煩人，而且一旦顯示多張圖片，IE 6上就卡的要命（expression在IE上比較占用資源，感覺設計是用來玩得，F(xiàn)IREFOX自適應效果還是比較好，速度也非�？欤�，反正筆者至今是 沒有找到更好的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;

就可以了，可以將背景圖根據(jù)窗口大小鋪滿整個瀏覽器窗口。

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

【小編推薦】

HTML5 meter標簽什么意思？meter標簽的用法詳解

html表單中textarea屬性怎么固定大�。縯extarea屬性實例介紹

以上就是HTML中的圖片如何自適應屏幕？這篇文章有圖片的自適應用法介紹的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！