如何设置响应式图像的最大宽度（Bootstrap 4）？

Question

题：

• 如何在 Bootstrap 4 中设置图像的最大宽度，同时保持图像的响应能力？

背景：

• Boostrap 4 的.img-fluid类使图像具有响应性。

最大宽度：100%；和高度：自动；应用于图像，使其与父元素一起缩放 ( https://getbootstrap.com/docs/4.1/content/images/ )

我的情况：

• 见JS小提琴：https : //jsfiddle.net/aq9Laaew/290257/
• 我有一个非常大的图像......太大了。

• 我已经设置max-width: 500px（内联样式），这设置了图像的宽度 - 太棒了。

• 问题：当您缩小窗口大小时，它不会调整大小/响应......它不再响应。

希望这很清楚；我试图在这里寻找类似的问题，但没有成功。干杯!

Answer 1

你的答案在这里

.img-max {
  max-width: 500px;
  width:100%;
}

并使用图像中的类。

我已经编辑了你的小提琴。请参考链接

jsfiddle.net/saravanan7944/ygamjz7s/1