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

本文主要是介绍【web布局】多个高度一致的子元素按各自宽度比例铺满容器，自适应窗口大小，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

工作中遇到这个问题，解决了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;
}

这篇关于【web布局】多个高度一致的子元素按各自宽度比例铺满容器，自适应窗口大小的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---