多图并列格式优化

代号_赖皮

于 2024-05-01 17:52:07 发布

阅读量20

点赞数 1

文章标签：前端 css3 html5 图像处理

本文链接：https://blog.csdn.net/weixin_63493262/article/details/138376740

版权

本文介绍了如何使用HTML和SCSS进行多图并列格式的优化，利用Flex布局和CSS的`:first-child`、`:last-child`及`:only`类实现响应式图片展示，同时保持良好的视觉效果。

摘要由CSDN通过智能技术生成

多图并列格式优化

在这里插入图片描述

	<view class="images">
			<view class="image" :class="picArr.length == 1 ? 'only' : '' " v-for="img in picArr" :key="img">
				<image src="../../static/images/avatar.jpg" mode="aspectFill"></image>
			</view>
		</view>

<style lang="scss">
	.images {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ccc;
		width: 100%;

		.image {
			width: 200rpx;
			height: 200rpx;
			overflow: hidden;
			margin: 10rpx;

			image {
				width: 100%;
				height: 100%;
			}

			&:first-child {
				border-radius: 20rpx 0 0 20rpx;
			}

			&:last-child {
				border-radius: 0 20rpx 20rpx 0;
			}

			&.only {
				border-radius: 20rpx;
			}
		}
	}
</style>