AMP-Carousel具有不同的圖像尺寸

我正在努力創造一個具有不同尺寸圖像的AMP-Carousel。我想將旋轉木馬中的圖像縮放到自動寬度的固定高度&。AMP-Carousel具有不同的圖像尺寸

文檔中提供的示例都具有相同的寬度/高度。

我試過忽略了使用layout =「fixed-height」的amp-img元素&的寬度，但那根本沒用。文檔非常混亂。

<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-小提琴告訴你什麼是我有&我想要的

https://jsfiddle.net/ag38afa7/

編輯：

的樣式沒有與文檔一致或者我不明白他們？
在放傳送帶頁，它說：Layout not supported for: responsive 但演示頁面上的AMP-IMG元素有layout="responsive"
https://ampbyexample.com/components/amp-carousel/

來源

2016-03-04 Brian G. Bell

您需要使用「固定高度」佈局類型。該元素佔用可用空間但保持高度不變。 width屬性不能出現或者必須等於auto.Check [示例]（https://github.com/ampproject/amphtml/tree/ef00e97ddcee7fb96398f656c53a4c60523829d4）。 – abielita

這不適合我，請從下面的答案中看到我更新的jsfiddle：http://jsfiddle.net/ag38afa7/1您可以使用解決方案更新jsfiddle嗎？ –

我有同樣的問題，你找到一個解決方案？ –

您必須使用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-05 19:38:39

恐怕這會拉伸圖像，請參閱更新的jsfiddle：https：//jsfiddle.net/ag38afa7/1/ –

它不會拉伸圖像。他們仍然有原始的長寬比。 –

我已經用你的解決方案更新了jsfiddle並延伸了圖像：https://jsfiddle.net/ag38afa7/1/ –

AMP-Carousel具有不同的圖像尺寸

回答

相關問題