在HTC更宽更高的屏幕上的Bootstrap 3中居图像

Question

我有一个不会对齐中心的图像。我确定我做了一些严重错误的事情。如何将此图像居中？我已经尝试了样式，边距自动，中心块，中心文本等。没有任何作用。

在所有小型移动设备上，320px图像居中且全宽，但较大的移动设备（更宽的iPhone，HTC，GalaxyS5等） - 保持对齐。

<header id="about2" class="about-mobile visible-xs hidden-sm" style="background-color:#20aab4; margin-top:0;height:661px;">
  <div class="text-vertical-center" style="margin-top:0;">
    <div class="visible-xs " style="z-index:1;">
      <div id="num10" class="visible-xs">
        <BR>
        <BR>
        <img src="images/homepage/INTROs_AboutUs_Mobile.png" class="img-responsive center-block" alt="" width="320" height="661" usemap="#MapAboutUs" />
        <map name="MapAboutUs">
          <area shape="rect" coords="66,237,147,270" href="our-story/index.html">
          <area shape="rect" coords="153,239,257,267" href="our-navigators/index.html">
        </map>
      </div>
    </div>
  </div>
</header>

Answer 1

你的硬币中的width =“320”height =“661”定义了图像的宽度和高度。在宽度为320的较小屏幕上。宽度=“320”与320px宽度匹配，因此它填充宽度，但由于显而易见的原因，现在将使用更大的屏幕。这就是为什么您不再需要使用内联样式和为标记定义宽度和高度并将所有内容放入单独的.CSS文件中的原因。尝试用...做同样的事情。

   img {width:100%;height:auto}

这将采用父元素标记的宽度。然后适当调整高度。