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

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

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

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

 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中的圖片自適應的三個常用的應用方法了，有問題的可以在下方提問。
【小編推薦】
HTML5 meter標簽什么意思？meter標簽的用法詳解
html表單中textarea屬性怎么固定大小？textarea屬性實例介紹
以上就是HTML中的圖片如何自適應屏幕？這篇文章有圖片的自適應用法介紹的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。