android - 在 HTC 更宽和更高的屏幕上，Bootstrap 3 中的中心图像

Question

我的图片无法居中对齐。我确定我做错了什么。我怎样才能使这张图片居中？我尝试了样式、margin auto、center-block、center-text 等。没有任何效果。

在所有小型移动设备上，320 像素的图像居中且全宽，但是那些较大的移动设备(较宽的 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

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

   img {width:100%;height:auto}

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