Question

我在Chrome和Firefox中遇到浏览器兼容性问题时左右边距使用边距并缩小图像。完美，这就是我想要的。 Buuuuut，仅在第一张图片中，其他图片的反应方式不同。

在IE和Edge中，即使是第一部也不是我想要的。图像恰到好处。

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png" class="img-responsive center-block logo-index ng-scope" style="margin: 0 39%;">
<img src="http://s.cdpn.io/3/kiwi.svg" class="img-responsive center-block logo-index ng-scope" style="margin: 0 39%;">
<img src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="img-responsive center-block logo-index ng-scope" style="margin: 0 39%;">

Codepen

解释为何会发生这种情况？（是的，我知道解决方案是使用Width: Percentage。我只是好奇。）

Answer 1

您是否使用保证金控制图像的大小？

＆＃13;

img {
  display: block;
  margin: 0 auto;
}

.img1 {
  width: 100px;
}

＆＃13;

<img src="http://sismonitor.com.br/sismonitor/images/logo.svg" class="img1 img-responsive center-block logo-index ng-scope">

<img src="http://s.cdpn.io/3/kiwi.svg" class="img2 img-responsive center-block logo-index ng-scope">

<img src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="img3 img-responsive center-block logo-index ng-scope">

＆＃13;

使用边距的中心图像

1 个答案: