如何操作 - 响应式图片

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

响应式图片将自动调整以适合屏幕尺寸。

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

如何创建响应式图片

如果您希望图片在响应能力上同时放大和缩小，请设置 CSSwidth属性达到 100% 且height至自动：

.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 教程了解有关响应式网页设计的更多信息。