Question

对于AMP文章，我将文章正文设置为动态宽度列（当前为30vw）。我希望图片能够全长填充列，因此我使用<amp-img layout='responsive'>。这种方法很好，除了比列窄的图像 - 在这种情况下，responsive模式升级它们，这是不可取的。

我可以通过将较小的图片设置为fixed布局来解决此问题。但在哪里停下来？如果我将所有图像设置为fixed，则较大的图像将从列中突破。而且我不知道px中列的宽度，因此无法根据该值更改逻辑。

在CSS中，我可以使用max-width：

来解决这个问题

<amp-img src="http://placehold.it/90x60" width="90" height="60" style="max-width: 90px" layout="responsive" alt="an image"></amp-img>

...但是在AMP中不允许使用内联CSS，这无法通过验证。

我在这里解释了这个问题：http://codepen.io/georgecrawford/full/XKOWgd/。

AMP HTML：

  <main>
    <p>'responsive' layout is fine when the image fits in the column:</p>
    <amp-img src="http://placehold.it/600x400" width="600" height="400" layout="responsive" alt="an image"></amp-img>

    <p>For smaller images, we use 'fixed' to avoid them being upscaled</p>
    <amp-img src="http://placehold.it/90x60" width="90" height="60" layout="fixed" alt="an image"></amp-img>

    <p>Otherwise:</p>
    <amp-img src="http://placehold.it/90x60" width="90" height="60" layout="responsive" alt="an image"></amp-img>

    <p>But we can't make all images fixed, in case they're bigger than the column width:</p>
    <amp-img src="http://placehold.it/600x400" width="600" height="400" layout="fixed" alt="an image"></amp-img>

    <p>...and we want the column width to be responsive, and set in ems. So what to do? Ideally, we'd use 'responnsive' layout for all images, but with a max-width of 100% (i.e. the parent container width).</p>
  </main>

CSS：

main {
  margin: 0 auto;
  max-width: 30vw;
  background: lightblue;
}

amp-img {
  outline: 1px solid gold;
  margin: 10px 0;
}

有任何聪明的建议吗？

Answer 1

在CSS中，您可以：

.smImg {
    max-width: 90px;
}

然后在AMP HTML中获取较小的图片：

<amp-img class="smImg" ... ></amp-img>

或者这是否需要动态，因为您不是手动创建这些页面？在这种情况下，了解更多细节可以帮助你。

Answer 2

你可以做这样的事情 -

.halfwidth{
width:50%; text-align: center; padding:15px;  margin: 0 auto;
}

当然，您不必设置50％宽度，您的选择。将图像包含在

中

<div class="halfwidth">
<amp-img src="http://placehold.it/90x60" width="90" height="60"  layout="responsive" alt="an image"></amp-img>
</div>

PS：永远不要使用倾斜样式。它在amp-html中无效。

Answer 3

将图像包装在div中，并在嵌入式CSS中设置div的最大宽度：

<div style="max-width: 90px">
  <amp-img src="http://placehold.it/90x60" width="90" height="60" layout="responsive" alt="an image"></amp-img>
</div>

如何在响应模式下设置amp-img的最大宽度？

3 个答案: