<form id="ddd9p"><nobr id="ddd9p"></nobr></form>

          <address id="ddd9p"></address>

          當前位置: 沐風博客 >> 網頁設計 >>正文

          防止圖片過大超出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

          發表評論:

          ◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

          沐風博客,更新包含SEO培訓教程、網站運營及網絡推廣等互聯網資訊

          線下SEO培訓地址:廣州.廈滘 | 線上SEO培訓不受地域限制

          人人妻人人A爽人人模夜夜

          <form id="ddd9p"><nobr id="ddd9p"></nobr></form>

                  <address id="ddd9p"></address>