アンプでのスタイリッシュなレイアウト - img

Question

Google AMPを実装して以来、私はこの問題に苦労しています。私は私のウェブサイトwidthよりもはるかに小さいwidth、amp-imgで画像を追加するたびに、自動的にこのように、縦横比を維持するために余白を追加します。[公式ドキュメント]で述べた

私が試してみました他のレイアウトを、（https://www.ampproject.org/docs/guides/responsive/control_layout#supported-values-for-the-layout-attribute）、flex-item。例えばflex-itemで

が、私はこのように見えるように画像の総マージンを減らすこと、つまり、デスクトップ版で目的の動作を取得することができます：

しかし、モバイル版で

、画像が画面よりも広い場合は、画像が左右にオーバーフローします。

responsive layout画像が比較的小さい場合に大きな余白を取り除く方法はありますか？

コード内のビットを調べると、問題は、要素google-ampが自動的に追加され、そのうちの制御できない要素i-amphtml-sizerによって引き起こされているようです。

は、私はそれがスパムとみなされた場合の私のブログの記事のURLを投稿していないのですが、いくつかの理由のためにあなたがそれを必要とする場合、私は質問を更新します。

UPDATE

それはseems more peopleは、この問題を抱えています。

Answer 1

私はそれを解決しました！次の例では

、ビューポートが320PXよりも広い場合、画像がそうでなければ、320PXワイドになります：githubにアンペアdocumentationを読んで、コンクリート中の「サイズ」でamp-html-layout上のセクションでは、例は言ってあります100ワイド（ビューポート幅の100％）になります。

<amp-img src="https://acme.org/image1.png" 
    width="400" height="300" 
    layout="responsive" 
    sizes="(min-width: 320px) 320px, 100vw"> 
</amp-img> 

以前は、私のイメージは：

<figure> 
    <amp-img 
    on="tap:lightbox1" 
    role="button" 
    tabindex="0" 
    layout="responsive" src="/img/securitynow.jpg" 
    width="100" 
    height="100"> 
    </amp-img> 
</figure> 

AMPのマニュアルを読んだ後：

<figure> 
    <amp-img 
    sizes="(min-width: 100px) 100px, 100vw" 
    on="tap:lightbox1" 
    role="button" 
    tabindex="0" 
    layout="responsive" src="/img/securitynow.jpg" 
    width="100" 
    height="100"> 
    </amp-img> 
</figure> 

今では、すべての画面サイズにも表示されます。

それ以外の場合は、

sizes="(min-width: withOfImage) WithOfImage, 100vw" 

この方法では、画面は画像の幅よりも広い場合、画像はその元の幅を持っています：画像サイズのすべての種類で動作するために

は、私はこのルールを以下のよイメージはビューポート幅の100%になります。