image媒体主键配合swiper轮播

最新推荐文章于 2026-01-06 22:08:56 发布

原创最新推荐文章于 2026-01-06 22:08:56 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#媒体

image属性说明：

src：要引入图片资源的地址

mode:图片裁剪、缩放的模式,默认为scaleToFill

mode有效值：

scaleToFill:不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

aspectFit:保持纵横比缩放图片，使图片的长边能完全显示出来

aspectFill:保持纵横比缩放图片，只保证图片的短边能完全显示出来

widthFix：宽度不变，高度自动变化，保持原图宽高比不变

heightFix：高度不变，宽度自动变化，保持原图宽高比不变，App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3

代码示例：

<template>
	<swiper class="swiper_f" indicator-dots indicator-color="#c0c0c0" 
	indicator-active-color="#555555" autoplay interval="1000" circular vertical>
		<swiper-item class="swiper_itme">
			<image src="../../static/pic1.jpg" mode="scaleToFill"></image>
		</swiper-item>
		<swiper-item class="swiper_itme">
			<image src="../../static/pic2.jpg" mode="aspectFit"></image>
		</swiper-item>
		<swiper-item class="swiper_itme">
			<image src="/static/pic3.png" mode="aspectFill"></image>
		</swiper-item>
		<swiper-item class="swiper_itme">
			<image src="../../static/pic4.jpg" mode="widthFix"></image>
		</swiper-item>
		<swiper-item class="swiper_itme">
			<image src="../../static/pic4.jpg" mode="heightFix"></image>
		</swiper-item>
	</swiper>
</template>

<script>
	
</script>

<style lang="scss">
	.swiper_f{
		width: 100vw;
		height: 200px;
		text-align: center;
		background:green;
		.swiper_itme{
			width: 100vw;
			height: 200px;
			background: pink;
			image{
				width: 100%;
				height: 200px;
				background: red;
			}
		}
	}
	.swiper_itme:nth-child(2n){
		background: red;
	}
</style>