需求背景:
要求一行显示多张图片,取最高的那张图片高度为整体高度,其余的图片的高度为最高高度,平铺拉伸裁剪
原图
拉伸裁剪后:
拉伸裁剪后
解决方案:
1、首先上传图片时拿到每张图片的高度。
2、使用flex布局,align-items: stretch;
3、找出高度最大的那张图片使用img,不限制高度,其余图片使用div+background背景图做拉伸裁剪
要求一行显示多张图片,取最高的那张图片高度为整体高度,其余的图片的高度为最高高度,平铺拉伸裁剪
拉伸裁剪后:
1、首先上传图片时拿到每张图片的高度。
2、使用flex布局,align-items: stretch;
3、找出高度最大的那张图片使用img,不限制高度,其余图片使用div+background背景图做拉伸裁剪