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="https://cache.yisu.com/upload/information/20200318/90/7870.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中的圖片自適應屏幕的方法大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。