H5、下程序 如何实现一行显示多张图片,以最高的图片高度为整体高度,其他图片自适应拉伸裁剪

需求背景:

要求一行显示多张图片,取最高的那张图片高度为整体高度,其余的图片的高度为最高高度,平铺拉伸裁剪


原图

拉伸裁剪后:


拉伸裁剪后

解决方案:

1、首先上传图片时拿到每张图片的高度。

2、使用flex布局,align-items: stretch;

3、找出高度最大的那张图片使用img,不限制高度,其余图片使用div+background背景图做拉伸裁剪


你可能感兴趣的:(H5、下程序 如何实现一行显示多张图片,以最高的图片高度为整体高度,其他图片自适应拉伸裁剪)