如何創建：響應式圖像

學習如何使用 CSS 創建響應式圖像。

響應式圖像將自動調整以適應屏幕尺寸。

調整瀏覽器窗口大小以查看響應效果：

如何創建響應式圖像

<img src="nature.jpg" alt="Nature" class="responsive">

如果您希望圖像的響應能力可同時放大和縮小，請將 CSS 的 width 屬性設置為 100%，height 設置為 auto：

.responsive {
  width: 100%;
  height: auto;
}

如果您希望圖像在必要時縮小，但絕不放大到大于其原始大小，請使用 max-width: 100%：

.responsive {
  max-width: 100%;
  height: auto;
}

如果要將響應式圖像限制為最大尺寸，請使用 max-width 屬性以及您選擇的像素值：

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}