意合云首頁
全網(wǎng)整合營銷
百度愛采購
抖音精準(zhǔn)獲客
網(wǎng)站建設(shè)
定制開發(fā)
信息資訊
認(rèn)識意合云
撩一下
二維碼
你的想法
顧問微信
客服微信
佛山自適應(yīng)網(wǎng)站定制之圖片自適應(yīng)大小
做項目的過程中遇到了一個圖片拉伸的問題，做的是手機(jī)端的頁面，當(dāng)讓其以電腦端頁面顯示的時候，圖片被拉伸的有那么點(diǎn)丑！所以改改它！
為什么會出現(xiàn)這樣的情況呢？
1、因為圖片是放在盒子模型中的，讓圖片填滿整個盒子的方式來實現(xiàn)，但這樣圖片會根據(jù)盒子的大小拉伸，導(dǎo)致顯示變形?
2、同一個模塊，電腦端和手機(jī)端的盒子模型大小是不一樣的?
3、因為上面的1 2點(diǎn)，所以圖片就被拉伸了 ! ?
1，響應(yīng)式圖像
根據(jù)不同的屏幕分辨率，和設(shè)備像素比來盡可能選擇高分辨率的圖片。?
或者換個角度來說，當(dāng)在小屏幕上不需要高清圖或大圖，這樣我們用小圖代替，就可以減少網(wǎng)絡(luò)帶寬啦。（當(dāng)然小編在項目中只是用到了自適應(yīng)，對于其他的還了解甚少）
2、如何做
代碼如下：
.img-responsive { ?display: inline-block; ?height: auto; ?max-width: 100%;}12345
（1）display:inline-block 元素相對于它周圍的內(nèi)容以內(nèi)聯(lián)形式呈現(xiàn)，但與內(nèi)聯(lián)不同的是，這種情況下我們可以設(shè)置寬度和高度。?
（2） height:auto，相關(guān)元素的高度取決于瀏覽器。 ?
（3）max-width : 100% 會重寫任何通過 width 屬性指定的寬度。這讓圖片對響應(yīng)式布局的支持更友好。?
以上就是佛山自適應(yīng)網(wǎng)站定制之圖片自適應(yīng)大小，希望能對大家有所幫助。?
? ? ? ?
