如何创建：响应式图像

学习如何使用 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;
}