天天看點

讓圖檔自适應螢幕大小

讓圖檔自适應螢幕大小

最簡單的方法,保證管用,你把那個圖檔寫在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://www.tao3w.com/upload/kindeditor/image/20140724/20140724172508_15817.jpg" alt="">

</div>

這裡就把圖檔固定在msg_desc裡面了,友善吧。

-------------

注:在html裡面插入圖檔,如果想讓圖檔自适應螢幕的小而不是寬高固定不變可以在css代碼裡加入

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

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

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

--- end ---