模板:并列图像/styles.css

/* 参考 [[Wikipedia:Template:Multiple image/styles.css]] */

/* 外部容器 */
.multi-image {
	max-width: 100%;
	overflow-x: auto;
}

/* 内部容器 */
.multi-image .multi-image-inner {
	display: flex;
	flex-direction: column;
}

.multi-image .multi-image-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}

/* 图片格子 */
.multi-image .multi-image-item {
	margin: 1px;
}

.multi-image .multi-image-header {
	font-weight: bold;
	text-align: center;
	width: 100%;
	margin: 3px 0;
}

.multi-image .multi-image-footer {
	width: 100%;
}

.multi-image .multi-image-upload {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

/* 允许改变图片背景色 */
.multi-image .thumbimage[style*="background-color"] img
{
	background-color: transparent;
}

@media screen and (max-width: 768px) {
	.thumb {
		margin: 0.6em 0;
		overflow-x: auto;
	}
	.multi-image .thumbinner {
		max-width: calc(100% - 8px) !important;
		/* width: min-content !important; */
		align-items: center;
		margin: 0 auto;
	}
	.multi-image .multi-image-row {
		justify-content: center;
	}
	.multi-image .multi-image-item {
		max-width: 100% !important;
	}
	.multi-image .thumbimage {
		overflow-x: auto !important;
	}
}