如何创建：响应式图像

学习如何使用 CSS 创建响应式图像。

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

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

如何创建响应式图像

如果您希望图像的响应能力可同时放大和缩小，请将 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;
}