HTML img 標籤的三個實用方法

限制圖片大小

如果我們用 width: 100%，圖片會跟著父元素的寬度，當父元素越大，圖片也會變大，如下👇

有時候我們希望圖片的大小不要超過原始尺寸，此時就可以用 max-width: 100% 來限制圖片的寬度在原始尺寸內，如下👇。

這邊附上程式碼 👇

<div class="container">
  <p>width: 100%</p>
  <img class="width" src="./img.jpg" alt="img">
</div>
<div class="container">
  <p>max-width: 100%</p>
  <img class="max-width" src="./img.jpg" alt="img">
</div>

.container {
  padding: 8px;
  border: 1px solid;
  text-align: center;
  
  resize: horizontal;
  overflow: auto;
}
.width {
  width: 100%;
}
.max-width {
  max-width: 100%;
}

利用 <source> 根據螢幕大小變化圖片

如果我們希望在不同的螢幕尺寸，顯示不同的圖片，最容易想到的方法可能是用 media query。

 @media screen and (max-width: 600px) {
    .bg {
      background-img: url('./some/url/img.webp')
    }
 }

但其實使用原生的 picture 和 source 標籤，就能夠輕易做到一樣的事情。

只要指定 source 以及 media 就可以根據寬度來顯示不同的圖片 👇

<picture>
  <source srcset="img1.jpg" media="(max-width: 600px)">
  <source srcset="img2.jpg" media="(max-width: 1600px)">
  <source srcset="img3.jpg">
  <img src="img1.jpg" alt="Flowers">
</picture>

指定圖片的點擊範圍

如果你希望用戶點擊圖片的不同地方，可以跳轉到不同的頁面，我們可以使用 <map> 和 <area> 來做到，舉例說這張圖片👇

我希望用戶點擊書本時跳到 book 頁面，點手機跳到 phone 頁面，點橘子跳到 fruit，點電腦跳到 computer。

此時可以用網路上的 Image Map 工具 ( Free Online Image Map Generator ) 來快速指定區域，使用起來非常簡單，用滑鼠點擊就可以框出想被用戶點擊的區域，並產生相對的 code。

此時就可會產生以下的 code，只要用戶點擊這些範圍就可以跳到相應的頁面了～

<img src="img.jpg" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="book" title="book" href="/book" coords="63,185,156,236,116,307,23,253" shape="poly">
    <area target="_blank" alt="computer" title="computer" href="/computer" coords="202,37,224,150,211,317,466,315,460,153,492,34" shape="poly">
    <area target="_blank" alt="phone" title="phone" href="/phone" coords="541,221,501,246,559,341,602,309" shape="poly">
    <area target="_blank" alt="fruit" title="fruit" href="/fruit" coords="510,141,24" shape="circle">
</map>

小結

你喜歡這樣的 HTML 冷知識嗎，想知道更多實用的冷知識，留言告訴我。那老樣子，我們下篇貼文見～！