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具有不同的图像尺寸

回答

相关问题