标签：flex 排列 img 均匀分布 imgs var position 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。