如何设置响应图像的最大宽度(引导程序4)? [英] How to set responsive image's max width (Bootstrap 4)?

问题描述

问题:

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

背景:

• Boostrap 4的.img-fluid类使图像响应.

• Boostrap 4's .img-fluid class makes images responsive.

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

我的情况:

• 请参见 JS小提琴: https://jsfiddle.net/aq9Laaew/290257/
• 我的图片非常大...太大.

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

• See JS Fiddle: https://jsfiddle.net/aq9Laaew/290257/
• I have an image that is very big... too big.

• I have set max-width: 500px (inline styling), and this sets the image's width - Awesome.

问题:缩小窗口大小时，它不会调整大小/响应...不再响应.

Problem: It does not resize / respond when you shrink the window size... It is no longer responsive.

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

Hope that was clear; I've tried to look for similar questions here but wasn't successful. Cheers!

推荐答案

您的答案在这里

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

并使用图像中的类.

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

I have edited your fiddle. Please refer the link

jsfiddle.net/saravanan7944/ygamjz7s/1

这篇关于如何设置响应图像的最大宽度(引导程序4)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！