响应式图像

---

了解如何使用 CSS 创建响应式图片。

---

响应式图像会自动调整以适应屏幕大小。

调整浏览器窗口大小以查看响应效果:

---

如何创建响应式图片

步骤 1) 添加 HTML:

实例

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

---

步骤 2) 添加 CSS:

如果您希望图像在响应能力上同时放大和缩小，请将 CSS width 属性设置为 100% 和 高度自动:

实例

.responsive {
  width: 100%;
  height: auto;
} 亲自试一试 »

如果您希望图像在必要时缩小，但从不放大到大于其原始尺寸，请使用 max-width: 100%:

实例

.responsive {
  max-width: 100%;
  height: auto;
} 亲自试一试 »

如果您想将响应式图像限制为最大尺寸，请使用 max-width 属性以及您选择的像素值:

实例

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
} 亲自试一试 »

转到我们的 CSS 图像教程，了解有关如何设置图像样式的更多信息。

转到我们的 CSS RWD 教程，了解有关响应式网页设计的更多信息。