如何创建 - 响应式图片

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