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

Question

问题:

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

背景:

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

应用max-width: 100%;和height: auto;到图像，以便它与父元素一起缩放(https://getbootstrap.com/docs/4.1/content/images/)

我的情况:

• 请参阅JS Fiddle: https://jsfiddle.net/aq9Laaew/290257/
• 我有一个非常大的图像...太大了。

• 我已经设置了max-width: 500px(内联样式)，这样就可以设置图像的宽度-很棒。

• 问题:当您缩小窗口大小时，它不会调整大小/响应。它不再具有响应性。

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

- daCoda

---

不要使用px来定义宽度，而是使用百分比来定义，例如“width=100%;”。 - Saravanan

请查看 https://jsfiddle.net/saravanan7944/ygamjz7s/1/。 - Saravanan

Answer 1

你的答案在这里

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

并使用图像中的类。

我已经编辑了您的 fiddle。请参考链接

jsfiddle.net/saravanan7944/ygamjz7s/1

- Saravanan

Answer 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>

- Ashish Mehta