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

【问题标题】：How to set responsive image's max width (Bootstrap 4)?如何设置响应式图像最大宽度（Bootstrap 4）？
【发布时间】：2019-05-12 07:12:14
【问题描述】：

问题：

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

背景：

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

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

我的情况：

见 JS Fiddle：https://jsfiddle.net/aq9Laaew/290257/
我的图像非常大……太大了。
我设置了max-width: 500px（内联样式），这设置了图像的宽度 - 太棒了。
问题：当您缩小窗口大小时，它不会调整大小/响应...它不再响应。

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

【问题讨论】：

而不是 px 以百分比定义宽度说“width=100%;”
检查jsfiddle.net/saravanan7944/ygamjz7s/1

标签： css bootstrap-4 responsiveness

【解决方案1】：

你的答案就在这里

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

并使用图像中的类。

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

jsfiddle.net/saravanan7944/ygamjz7s/1

【讨论】：

【解决方案2】：

.img-max {
  max-width: 500px
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<p class="alert-primary p-3">
  I can set the max-width of the image... but then it stops being responsive.
</p>
  



<div class="container">
  <div class="img-max">
  <img  class=" mx-auto d-block mb-2 float-md-left mr-md-4 img-thumbnail"  src="https://images.pexels.com/photos/2422/sky-earth-galaxy-universe.jpg">
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore ipsa ea dolorem mollitia repudiandae odit dolore quod et voluptatem asperiores odio quam ipsam placeat nisi quo voluptate, laborum provident earum?
  </p>
</div>

【讨论】：