代码之家  ›  专栏  ›  技术社区  ›  Hong

如何使用响应式布局使amp img居中

  •  0
  • Hong  · 技术社区  · 7 年前

    以下代码不起作用。如果布局是固定的,那就行了。

    <div style="text-align:center;">
        <amp-img style="max-width: 640px;"  width="640" height="480" layout="responsive" src="~/Content/images/foo.JPG" />
    </div>
    

    请注意style=“max width:640px;”用于在窗口足够宽时阻止此图像填充宽度。

    任何小费都将不胜感激。

    2 回复  |  直到 7 年前
        1
  •  4
  •   Craig Scott    7 年前

    你的形象被包裹在 div 这是个好的开始。不确定页面是如何设置的,但将0 auto的边距应用于 为我工作。

    Here's a pretty good explanation 属于 margin: 0 auto; 以及为什么它可能对中心起作用,也可能不起作用。

    div.img-wrapper {
      max-width: 640px;
      margin: 0 auto;
    }
    
    <div class="img-wrapper">
      <amp-img src="/img/amp.jpg" width="640" height="200" layout="responsive" alt="AMP"></amp-img>
    </div>
    

    你可以测试一下 here 如果你想玩的话。

        2
  •  0
  •   Joseph    7 年前

    <div class="img-wrapper">
    <amp-img src="https://jomutech.com/dispJomutechIcon.png height="50" width="250" layout="responsive" alt="Logo">
    </amp-img>
    </div>
    
    <style amp-custom>
      div.img-wrapper {
        text-align: center;
      }
    </style>