使用引导程序缩放图像

Posted 2021-03-27

我使用了Bootstraps行功能并使用了代码：

<div class="col-md-1">
<img src="1.jpg" />
</div>

我发现放大和缩小时图像不会随列缩放。

我试过用来包装我的图像，这没用。我尝试手动缩放它，但在放大和缩小时会改变。

最后我尝试使用“Xem”作为高度和宽度，但这也不起作用。

我怎么能这样做才能使它具有可扩展的大小，可以使用bootstrap列进行扩展。

答案

您需要将类img-responsive添加到图像标记。

它在Bootstrap网站上的图像下记录

http://getbootstrap.com/css/#images

<div class="col-md-1">
    <img class="img-responsive" src="1.jpg" />
</div>

另一答案

对于Bootstrap 4及更高版本，这个帖子的最新主要版本的Bootstrap，他们将.img-responsive重命名为.img-fluid，所以一定要知道哪个版本并使用正确的标签。