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>
		`
	)
}

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

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

上一篇:linux学习笔记11-vim用法2


下一篇:前端笔试题2.24记录