如何设置响应式图像的最大宽度(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 Fiddle: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

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