Bootstrap响应式图像不会停留在中心

Question

我正在尝试在引导网格中排列三张图片。在我向其中一个图像添加img-responsive类之前，所有图像都是居中的，这正是我想要的。然而，我确实希望图像具有响应性，同时使它们比它们已经大一点点。试过很多东西，比如“宽度：200％;”但没有成功

外观如何

我在我的CSS中创建了一个“center-all”类，它应该将它们全部放在三个中，并且它确实有效，直到我将img-responsive类添加到红色类中。该课程未添加到任何其他图片中。

.center-all {
  text-align: center;
  align-items: center;
  align-content: center
  vertical-align: center;
}

的jsfiddle

https://jsfiddle.net/8a6ee7f5/

图片在Fiddle ofc中不起作用。

我想要实现的目标：

我希望图像比现在大2倍，我希望它们在保持中心的同时保持响应。

提前致谢！

Answer 1

我找到了问题的答案。

将img-responsive类添加到图像时，它会向左移动。通过在图像中添加“中心块”，它应该保留在中心。

<img src="..." class="img-responsive center-block">

现在我只需找到如何将我的照片升级到200％的答案。

编辑： 我找到了以下内容来升级我的图像：

CSS

.wrapper {
  width: 40%;
}

并将其添加到我的图片类。

HTML

<img src="..." class="img-responsive center-block wrapper">

这就解决了。

Answer 2

因此，bootstrap已经有一个名为.text-center的元素居中类，您只需将此类添加到包装项目的行中，该行中的所有内容都将居中。然后，您可以为图像添加宽度，或者为图像指定宽度百分比，而不是使用.img-responsive。它可能看起来像下面的东西，希望这是你正在寻找的东西：

这是一个小提琴Updated Fiddle

注意：我为您的图片添加了50％的边框半径，因为我假设您希望它们是圆形的。如果你想使用100px，你可以改回来。

的CSS：

#values img{
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 80%;
}
#val1 {
  background-color: #792c24;
}

#val2 {
  background-color: #4f5e6d;
}

#val3 {
  background-color: #665e25;
}

HTML：

<div class="container" id="values">
  <h3 class="fancy">Values</h3>
  <div class="row text-center">
    <div class="col-sm-4">
      <h4>Independent</h4>
      <img id="val1" src="http://placehold.it/300x300">
    </div>
    <div class="col-sm-4">
      <h4>Team Player</h4>
      <img id="val2" src="http://placehold.it/300x300">
    </div>
    <div class="col-sm-4">
      <h4>Dedicate</h4>
      <img id="val3" src="http://placehold.it/300x300">
    </div>
  </div>
</div>