7

寸法が異なる画像を使用して AMP-Carousel を作成するのに苦労しています。カルーセル内の画像を固定の高さと自動幅にスケーリングしたい。

ドキュメントで提供されている例はすべて同じ幅/高さです。

amp-img 要素の幅を省略して、layout="fixed-height" を使用しようとしましたが、まったく機能しませんでした。ドキュメントは非常に紛らわしいです。

<amp-carousel width=500 height=300>
    <amp-img src="http://placehold.it/200x600" width=200 height=600></amp-img>
    <amp-img src="http://placehold.it/700x550" width=700 height=550></amp-img>
    <amp-img src="http://placehold.it/340x410" width=340 height=410></amp-img>
</amp-carousel>

私が持っているものと欲しいものを示すためにjs-fiddleを作成しました

https://jsfiddle.net/ag38afa7/

編集：

スタイルがドキュメントと一致していませんか、それともわかりませんか?
amp-carousel ページには次のように記載Layout not supported for: responsive されていますが、デモ ページでは amp-img 要素にlayout="responsive"
https://ampbyexample.com/components/amp-carousel/があります。

4

2 に答える 2

5

レイアウトを使用して、fixed-heightカルーセルとすべての画像を同じ高さにする必要があります。縦横比を維持するには、それに応じて幅を更新する必要があります。例：

<amp-carousel height=300 layout="fixed-height">
    <amp-img src="http://placehold.it/200x600" width=100 height=300></amp-img>
    <amp-img src="http://placehold.it/700x550" width=381 height=300></amp-img>
    <amp-img src="http://placehold.it/340x410" width=248 height=300></amp-img>
</amp-carousel>

幅の自動調整は現在サポートされていません。

于 2016-03-05T19:38:39.657 に答える