【web布局】多个高度一致的子元素按各自宽度比例铺满容器，自适应窗口大小

原创于 2017-09-15 11:04:36 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种使用Flex布局实现图片拼接的方法，并解决了在调整浏览器窗口大小时出现的图片错位问题。通过设置图片的高度为100%，确保了不同尺寸的图片能够正确拼接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工作中遇到这个问题，解决了po上来做个记录

两张图片的比例：400*400，600*400

利用flex布局，遇到缩小窗口的时候，长的那个块image被压缩了，导致拼接出来不对

flex-grow方法只是针对父容器多余的空间来比例分配，不会带上自身的宽度

解决方法，image添加 “height: 100%” 样式

最后CSS文件：

.li{
	margin:-1px 0px 0px -1px;     /* 这个地方是让上下拼接时无缝拼接 */
	padding: 0;
	top: 0px;  
	bottom: 0px;
	font-size:0;
	width: 100%;
	overflow:hidden;
	
	display:-webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;		
}	
.img{
	top: 0px;  
	bottom: 0px;
	margin:0px;
	width:100%;
	height: 100%;
}
.link1{
	-webkit-flex-grow:1;
	-moz-flex-grow:1;
	flex-grow:1;
	
	display:block;
	border:0;
}
.link2{
	-webkit-flex-grow:1;
	-moz-flex-grow:1;
	flex-grow:1;
		
	display:block;
	border:0;
}