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

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

amp-html

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 年前

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 如果你想玩的话。

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>

推荐文章

saitho · Google AMP缓存和HTTP/2–通过HTTP/2在移动设备上交付内容?

8 年前

REDDY PRASAD Mortana · 在amp lightbox内创建amp表单

8 年前

ganchito55 · AMP和代码块

8 年前

Iustin BeceneagÄ · 当我在某个页面上时,我的wordpress标题消失了

8 年前

Nadine Fisch · 如何将子iframe维度设置为父amp iframe维度?

8 年前

Asim Khan · AMP访问控制允许源站标题问题

8 年前

Mariya Steksova · amp灯箱:如何在一个动作中关闭当前模式并打开其他模式?

8 年前

Christian Rauchenwald · 谷歌AMP>头部和网站地图

10 年前

Muhammad Ali Hassan · 在vivo模板中集成加速移动页面

10 年前

hugronaphor · 如果内容不可用,如何为AMP页面传递错误

10 年前