Amp html 具有不同图像尺寸的放大器转盘
我正在努力创建一个带有不同尺寸图像的放大器转盘。我想将旋转木马中的图像缩放到固定高度&自动宽度 文档中提供的示例都具有相同的宽度/高度 我曾尝试使用layout=“fixed height”忽略amp-img元素的宽度,但根本不起作用。这些文件非常混乱Amp html 具有不同图像尺寸的放大器转盘,amp-html,Amp Html,我正在努力创建一个带有不同尺寸图像的放大器转盘。我想将旋转木马中的图像缩放到固定高度&自动宽度 文档中提供的示例都具有相同的宽度/高度 我曾尝试使用layout=“fixed height”忽略amp-img元素的宽度,但根本不起作用。这些文件非常混乱 <amp-carousel width=500 height=300> <amp-img src="http://placehold.it/200x600" width=200 height=600></am
<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>
编辑:
样式与文档不一致,或者我不了解它们?
在amp转盘页面上显示:布局不支持:响应式
但在演示页面上,amp img元素具有layout=“responsive”
您必须使用固定高度
布局,并使转盘和所有图像具有相同的高度。需要相应地更新宽度以保持纵横比。例如:
<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>
目前不支持自动调整宽度。现在有一个全面的教程,其中有关于宽度的解释,不再需要有相同高度的图像
下面是一个稍加修改的(我使用图
而不是div
作为最小工作示例):
<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>
身材{
位置:相对位置;
宽度:100%;
高度:300px;
}
放大器{
对象匹配:包含;
}
您需要使用布局类型固定高度
。此图元占用可用空间,但保持高度不变。width属性不能存在或必须等于auto。检查此项。这对我不起作用,请从下面的答案中查看我更新的JSFIDLE:你能用你的解决方案更新JSFIDLE吗?我有同样的问题,你找到解决方案了吗?因为sebastian在下面更新的答案中确认,目前不可能自动执行此操作,我是这样解决的:我计算了纵横比(originalWidth/originalHeight)&然后用这种方法找到了每个图像的新宽度:$carouselHeight*ratio我恐怕这会拉伸图像,请参阅更新的jsfiddle:它不会拉伸图像。我已经用你的解决方案更新了JSFIDLE,它拉伸了图像:对不起,我忘了更新示例中的宽度。修好了。