創(chuàng)新互聯(lián)建站導讀：防止圖片過大超出DIV的CSS樣式有幾種，大家可以根據(jù)頁面的具體需求來設(shè)置。但有一點，那就是頁面必須要控制圖片的顯示尺寸，否則就可能影響到頁面的美觀。如果你發(fā)現(xiàn)頁面的圖片超出了div的寬度，也可以根據(jù)本文內(nèi)容去查看原因，然后再行修改。

成都創(chuàng)新互聯(lián)于2013年開始，先為洛陽等服務(wù)建站，洛陽等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為洛陽企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

筆者剛才在給頁面添加業(yè)務(wù)圖片的時候，遇到圖片被壓縮的問題，寬度1180的圖片，硬生生被壓成了850的寬度。后面經(jīng)過排查原因，原來是在css里面做了統(tǒng)一的圖片尺寸處理，當初設(shè)置的目的就是為了防止圖片過大而超出div。這里也給大家說下防止圖片過大超出DIV的CSS樣式。

img {border: none; max-width: 850px;}

上面這個css代碼就設(shè)置了圖片顯示的最大尺寸是850px，如果尺寸超過850px就會被強制壓縮成850的顯示寬度。

圖片的尺寸控制在頁面設(shè)計中還是比較重要的，尤其是某些企業(yè)網(wǎng)站，很多SEO編輯并不懂代碼。如果頁面沒有做圖片尺寸的控制，一旦上傳了大尺寸的圖片，就會導致頁面出問題，這會嚴重影響到用戶體驗。

創(chuàng)新互聯(lián)網(wǎng)站營銷SEO建議，在具體內(nèi)容模塊里面做下圖片顯示尺寸的顯示。比如說本站的文章頁面div的寬度是850px，那么我們就可以設(shè)置下img {border: none; max-width: 850px;}。

另外像商城頁面，還涉及到產(chǎn)品縮略圖，這個縮略圖也需要做好圖片的尺寸，可以選擇直接固定縮略圖的尺寸，也可以通過css樣式來控制圖片的顯示尺寸。

前面說到的代碼，僅僅是防止了圖片過大，很多時候我們還需要圖片自動縮放，這個時候我們可以選擇這樣的代碼：

 img{max-width: 100%; }

防止圖片過大超出DIV的CSS樣式是用得比較多的，尤其是在自適應(yīng)網(wǎng)站和手機端網(wǎng)站里面。這種方式讓圖片過大的頁面自動按比例縮放，比如說圖片的尺寸是寬1000px，高是700px，如果div的寬度是700，那么圖片就會以寬700px，高490px的尺寸顯示。

這種防止圖片過大超出DIV的CSS樣式有效的防止了圖片變形，但是在某些情況下也不使用，比如想要圖片填滿div的話，如果尺寸不對，縮放后就可能出現(xiàn)空白區(qū)域。

總之來說，防止圖片過大超出DIV的CSS樣式有幾種，大家可以根據(jù)頁面的具體需求來設(shè)置。但有一點，那就是頁面必須要控制圖片的顯示尺寸，否則就可能影響到頁面的美觀。如果你發(fā)現(xiàn)頁面的圖片超出了div的寬度，也可以根據(jù)本文內(nèi)容去查看原因，然后再行修改。

新聞名稱：防止圖片過大超出DIV的CSS樣式
鏈接分享：http://www.rwnh.cn/article34/iodjpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、全網(wǎng)營銷推廣、用戶體驗、外貿(mào)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)