具有不同图像尺寸的 AMP-Carousel [英] AMP-Carousel with varying image dimensions
问题描述
我正在努力创建一个包含不同尺寸图像的 AMP-Carousel.我想将轮播中的图像缩放到固定高度自动宽度.
I'm struggling to create an AMP-Carousel with images which have varying dimensions. I want to scale the images in the carousel to a fixed height & an automatic width.
文档中提供的示例都具有相同的宽度/高度.
The examples provided in the docs all have the same width/height.
我试过省略 amp-img 元素的宽度 &使用 layout="fixed-height" 但这根本不起作用.文档非常混乱.
I've tried leaving out the width for the amp-img elements & using layout="fixed-height" but that didn't work at all. The docs are very confusing.
<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 来向你展示我所拥有的 &我想要什么
I've created a js-fiddle to show you what I've got & what I want
https://jsfiddle.net/ag38afa7/
样式与文档不一致或我没有得到它们?
在 amp-carousel 页面上,它说:Layout not supported for:responsive
但在演示页面上,amp-img 元素具有 layout="responsive"
https://ampbyexample.com/components/amp-carousel/
The styles are not consistent with the docs or I don't get them?
On the amp-carousel page it says: Layout not supported for: responsive
but on the demo page the amp-img elements have layout="responsive"
https://ampbyexample.com/components/amp-carousel/
推荐答案
您必须使用 fixed-height
布局,并为 carousel 和所有图像提供相同的高度.宽度需要相应地更新以保持纵横比.示例:
You have to use the fixed-height
layout and give carousel and all images the same height. The width needs to be updated accordingly to keep the aspect ratio. Example:
<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>
目前不支持自动调整宽度.
Automatically adjusting the width is currently not supported.
这篇关于具有不同图像尺寸的 AMP-Carousel的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!