css圖片自適應(yīng)div大小 css如何設(shè)置圖片大小自適應(yīng)?
css如何設(shè)置圖片大小自適應(yīng)?1.用dw編輯器建立了一個(gè)靜態(tài)頁面2.將建好的靜態(tài)頁命名為css.html,標(biāo)題為了“css如何設(shè)置圖片大小自適應(yīng)”3.在body中添加兩個(gè)div,設(shè)置不能的寬度,并設(shè)c
css如何設(shè)置圖片大小自適應(yīng)?
1.用dw編輯器建立了一個(gè)靜態(tài)頁面
2.將建好的靜態(tài)頁命名為css.html,標(biāo)題為了“css如何設(shè)置圖片大小自適應(yīng)”
3.在body中添加兩個(gè)div,設(shè)置不能的寬度,并設(shè)class 為div1和div2,目的是用一樣的css控制圖片的寬度在不同的寬度容器中都能很好的顯示
4.在兩個(gè)div的class 中添加相同的控制圖片的class名為了 ”img“,并為div添加控制寬度的樣式
5.在兩個(gè)div中加入相同的圖片<img src="https://img.kmw.comimages/5.png" />,在瀏覽器打開頁面發(fā)現(xiàn)加入圖片后把原來的div都給覆蓋掉了
6.這個(gè)時(shí)候我們需要在img 類中加入限制圖片的寬度的css語句讓他自己適應(yīng)容器的寬度.img img{ width:100% height:auto}
手機(jī)網(wǎng)頁中有個(gè)DIV,怎么設(shè)置其背景圖片自適應(yīng)在DIV上?
因?yàn)殡娔X和手機(jī)分辨率的差異,這時(shí)候你要用比手機(jī)上顯示的圖片大兩三倍的圖片,
再用background-size把背景圖片縮小到你需要的比例;
比如手機(jī)上需要20*30大小的背景,這時(shí)候你就需要用60*90大小的圖片來做背景了,再用background-size: 20px 30px 把背景圖片設(shè)置需要的尺寸;這樣手機(jī)上顯示的圖片就很清晰了。如果是img就更簡(jiǎn)單了,直接設(shè)置wdith和height來縮小圖片