2023年11月9日 星期四

CSS 學習筆記 : 圖片的自適應寬度設定

最近努力上 Hahow 學校企業版學習, 這周聚焦在響應式網頁設計, 例如 Bootstrap 與 CSS, 雖然 Bootstrap 很好用, 但要會用得巧還是得要有堅強的 CSS 底子才行. 

圖片如果不設定 width 屬性, 則當瀏覽器寬度縮小時會出現 X 軸拉桿, 這在小型裝置上會造成使用經驗不佳問題. 今天學到這可以將 width 與 max-width 屬性設為百分比值來解決, 但兩者有如下差異 :
  • width : 
    設為 100% 時圖片會一直佔滿父元素 (例如 body) 空間, 瀏覽器放大時也跟著滿版放大, 超過圖片寬度解析度時會糊掉. 
  • max-width :
    設為 100% 時圖片不會一直佔滿父元素 (例如 body) 空間, 瀏覽器放大到 超過圖片寬度時不會持續放大, 當超過圖片寬度時會固定在其原本寬度, 因此不會有糊掉現象. 
因此除非有特別用途, 建議使用 max-width. 測試如下, 圖片來自 Pixabay (解析度 640x427) : 


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>圖片</title>
  <style>
    .pic {
      width: 100%;
      }
  </style>
</head>
<body>
  <img class="pic" src="images/landscape.jpg">
</body>
</html>

此例使用 width: 100% 屬性設定圖片寬度, 當瀏覽器縮小時圖片也會隨之縮小, 橫軸不會出現滑桿, 但它會一直滿版佔據整個視窗寬度, 當瀏覽器放大到超過圖片寬度 (640px) 時就會開始出現糊掉現象 :




在我的 Note8 手機上瀏覽不管直式或橫式都是滿版 : 




測試網址 :



其次是使用 max-width: 100% 的效果 : 

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>圖片</title>
  <style>
    .pic {
      max-width: 100%;
      }
  </style>
</head>
<body>
  <img class="pic" src="images/landscape.jpg">
</body>
</html>



當瀏覽器縮小時圖片一樣是跟著縮小不會出現滑桿, 當瀏覽器放大超過圖片寬度 640px 時圖片就固定在那寬度不會再放大, 因此不會有糊掉現象 : 


沒有留言:

張貼留言