防止圖片過大超出DIV的CSS樣式

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

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

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

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

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

沐風SEO建議，在具體內容模塊里面做下圖片顯示尺寸的顯示。比如說本站的文章頁面div的寬度是850px，那么我們就可以設置下img {border: none; max-width: 850px;}。

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

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

 img{max-width: 100%; }

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

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

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

防止圖片過大超出DIV的CSS樣式.doc

本文 已幫助 4379 人！

本站內容大部分由沐風博客原創，少部分內容來源于網絡，如有侵權請與我們聯系，我們會及時刪除！
責任編輯:沐風 | 發布時間:2021年12月15日08點51分13秒 | 本文永久地址為 http://www.aywdesigns.com/seo/2345.html