使用引导程序在中心制作响应式图像

Posted 2023-03-05

【中文标题】使用引导程序在中心制作响应式图像

【英文标题】：Making responsive images at center by using bootstrap

【发布时间】：2018-06-23 17:50:20

【问题描述】：

 <img class="img-responsive center-block"/>

   <div class="col-sm-2 mb-xs-30 wow fadeInUp">
    <div class="team-item">
         <div class="team-item-image">
               <img src="images/team/jy.png"  />

我正在尝试使所有图像都位于中心。但是，我不知道应该使用哪个引导代码。 我尝试在该部分的顶部使用 img-responsive，但失败了。 给定的代码是图像的一部分，这是我给出的第一个框。

【问题讨论】：

您使用的是 bootstrap v3 还是 v4？而且我认为使用 img-responsive 时 center-block 不会起作用。

没有引导你可以让img响应img:max-width:100%试试吧

Responsive image align center bootstrap 3的可能重复

【参考方案1】：

据我了解，您正在尝试制作一个居中的行、五个等距且居中的图像列，并且您正在使用引导程序，这是指向 the solution 的链接。

【讨论】：

我查了一下，好像右边的空白比左边的大很多。

我明白你在说什么，尝试一些东西。编辑：Codepen 上有一个解决方案，codepen.io/DenisDov/pen/pyjpgP

codepen.io/devdanpark/pen/mpjxyG 不知道你能不能看到这个。这是我的代码，但看起来左边的空间仍然更大（）现在没有图像）

我不明白你的意思。

我已经删除了我的旧 cmets，因为它们无助于以最佳方式解决您的解决方案，见上文。该链接将解决您需要解决的问题，但您可能需要编辑媒体查询以使其在较小的尺寸下真正响应。