HTML中的圖片自適應(yīng)屏幕的方法？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括滁州網(wǎng)站建設(shè)、滁州網(wǎng)站制作、滁州網(wǎng)頁(yè)制作以及滁州網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，滁州網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到滁州省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

首先我們看看HTML中的圖片是如何自適應(yīng)屏幕的：

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

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

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

<div class="msg_desc">
<img style="max-width:100%;overflow:hidden;" src="/upload/otherpic71/7870.jpg" alt="">
</div>

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

注：在html里面插入圖片，如果想讓圖片自適應(yīng)屏幕的小而不是寬高固定不變可以在css代碼里加入：

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

width:auto;是寬度自動(dòng)的意思。

“\9”是hack css 的一種寫法，這種在正常css代碼后面加"\9"的方式，只有IE瀏覽器才能識(shí)別，其他瀏覽器會(huì)忽略這條語(yǔ)句。這樣就能做到差異化瀏覽器，來(lái)達(dá)到兼容瀏覽器的目的。

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

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

今天介紹的這種是使用CSS來(lái)完成，根據(jù)實(shí)際的應(yīng)用效果來(lái)說，使用Javascript還是比較靠譜一點(diǎn)，因?yàn)镃SS的expression的確有點(diǎn)煩，小編是指使用效果上有點(diǎn)惱人，僅供大家參考使用。

使用CSS實(shí)現(xiàn)圖片的自適應(yīng)

使用CSS實(shí)現(xiàn)圖片自適應(yīng)很簡(jiǎn)單，主要靠?jī)蓚€(gè)參數(shù)來(lái)完成，分別是max-width和max-height，這兩個(gè)參數(shù)在FIREFOX和IE7以 上支持都很好，但是在IE6上面，效果非常糟糕，尤其是對(duì)于多張圖片的顯示，第一次顯示網(wǎng)頁(yè)大都很難達(dá)到圖片自適應(yīng)的效果，一般都是有些能自適應(yīng)，有些不 能自適應(yīng)，多次刷新可能又顯示OK，就是這點(diǎn)就足夠煩人，而且一旦顯示多張圖片，IE 6上就卡的要命（expression在IE上比較占用資源，感覺設(shè)計(jì)是用來(lái)玩得，F(xiàn)IREFOX自適應(yīng)效果還是比較好，速度也非常快），反正筆者至今是 沒有找到更好的CSS方法來(lái)讓IE 6完美支持圖片自適應(yīng)。

示例代碼如下：

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; 
}

上面代碼格式上需要特別注意兩點(diǎn)：

• zoom屬性里寬高賦值不能帶單位（如px），否則無(wú)效；

• if和else語(yǔ)句也必須帶大括號(hào)括起來(lái)，單句指令也不行（而在很多編程語(yǔ)言里，單句指令可以無(wú)需大括號(hào)）；

最后一個(gè)種放置背景圖片的方法：

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

如果是想適應(yīng)移動(dòng)設(shè)備的，用一個(gè)CSS3屬性

background-size:cover;

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

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)HTML中的圖片自適應(yīng)屏幕的方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：HTML中的圖片自適應(yīng)屏幕的方法
標(biāo)題URL：http://www.rwnh.cn/article14/peojge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、外貿(mào)建站、網(wǎng)站制作、品牌網(wǎng)站制作、搜索引擎優(yōu)化、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)