Bootstrap 响应式图像不会居中

Question

我试图在引导网格中排列三张图片。在我向其中一个图像添加 img 响应类之前，所有图像都居中，这就是我想要的。然而，我确实希望图像具有响应性，同时也使它们比它们已经大一点。尝试了很多东西，例如“宽度：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">

这修复了它。