具有不同图像尺寸的 AMP-Carousel
AMP-Carousel with varying image dimensions
我正在努力创建一个包含不同尺寸图像的 AMP-Carousel。我想将轮播中的图像缩放到固定高度和自动宽度。
文档中提供的示例都具有相同的width/height。
我试过省略 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/
您必须使用 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>
目前不支持自动调整宽度。
ampbyexample.com现在有一个全面的教程和解释,不再需要相同高度的图像。
这里是一个稍微修改过的(我使用 figure
而不是 div
作为 captions)最小的工作示例:
<style amp-custom>
figure {
position: relative;
width: 100%;
height: 300px;
}
amp-img img {
object-fit: contain;
}
</style>
<amp-carousel
height="300"
layout="fixed-height"
type="slides">
<figure>
<amp-img
layout="fill"
src="https://unsplash.it/500/400"></amp-img>
</figure>
<figure>
<amp-img
layout="fill"
src="https://unsplash.it/500/500"></amp-img>
</figure>
<figure>
<amp-img
layout="fill"
src="https://unsplash.it/300/500"></amp-img>
</figure>
</amp-carousel>
我正在努力创建一个包含不同尺寸图像的 AMP-Carousel。我想将轮播中的图像缩放到固定高度和自动宽度。
文档中提供的示例都具有相同的width/height。
我试过省略 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/
您必须使用 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>
目前不支持自动调整宽度。
ampbyexample.com现在有一个全面的教程和解释,不再需要相同高度的图像。
这里是一个稍微修改过的(我使用 figure
而不是 div
作为 captions)最小的工作示例:
<style amp-custom>
figure {
position: relative;
width: 100%;
height: 300px;
}
amp-img img {
object-fit: contain;
}
</style>
<amp-carousel
height="300"
layout="fixed-height"
type="slides">
<figure>
<amp-img
layout="fill"
src="https://unsplash.it/500/400"></amp-img>
</figure>
<figure>
<amp-img
layout="fill"
src="https://unsplash.it/500/500"></amp-img>
</figure>
<figure>
<amp-img
layout="fill"
src="https://unsplash.it/300/500"></amp-img>
</figure>
</amp-carousel>