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