css之图片等比例均匀分布排列

图片随着伸缩跟着放大缩小，使占据的一行铺满

css部分：
* {
	box-shadow : inset 0 0 3px red 
}
section {
	display: flex;
	flex-flow: wrap;
}
div {
	flex-grow;
	margin: 5px;
	position: relative;
	overflow: hidden;
}

img {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 101%;
}

js部分：
var imgs = [
	fullUrl: 'http://'
]
var h = 250
imgs.forEach(img => {
	document.write(
		`
			<div style="flex-grow: ${img.width * h / img.height};width: ${img.width * h / img.height}px;">
				<main style="padding-bottom: calc(${img.height} / ${img.width} * 100%);"></main>
				<img src="${img.fullUrl}"/>
			</div>
		`
	)
}

 最后一行如果图片少可以在后面给几个空的div

标签：flex,排列,img,均匀分布,imgs,var,position,css
来源： https://blog.csdn.net/qq_57540936/article/details/123118392