html移动端正方形图片,htmlcss图片居中(水平居中和垂直居中)，移动端图片预览...

做网站的时候&＃xff0c;经常会遇到因图片宽高比率不一致导致图片显示方式有问题。

1、在图片宽高未知的情况下&＃xff0c;图片上下左右居中

我以前的博客文章有写过&＃xff0c;就不再重复了。博客地址&＃xff0c;效果预览地址(欢迎copy)

上面的虽然没问题&＃xff0c;但是在图片列表里&＃xff0c;图片上下左右不对齐&＃xff0c;造成图片列表排版很难看&＃xff0c;产品要求宽高定死&＃xff0c;也就是下面的第二种方法。

2、在图片宽高未知的情况下&＃xff0c;img标签 宽高固定显示(图片会变形)

因为第二种方法&＃xff0c;宽高定死&＃xff0c;导致图片变形了&＃xff0c;反而不美。

产品说&＃xff1a;我要图片不失真&＃xff0c;又能铺满呈正方形排列&＃xff0c;就像朋友圈里的图片&＃xff0c;然后我打开朋友圈&＃xff0c;看了朋友圈里的图片显示方式&＃xff0c;然后有了下面的两种写法。

3.1、在图片宽高未知的情况下&＃xff0c;img标签不固定&＃xff0c;但父盒子固定&＃xff0c;只显示图片中心部分&＃xff0c;例如微信朋友圈列表的图片(flex布局方式)

效果预览图

3.2、在图片宽高未知的情况下&＃xff0c;img标签不固定&＃xff0c;但父盒子固定&＃xff0c;只显示图片中心部分&＃xff0c;例如微信朋友圈列表的图片(页面结构简单粗暴  ie8兼容版本)(朋友交流得到的ie8以下兼容版本)

效果预览图

微信朋友圈的图片展现方式都有了&＃xff0c;就顺便多分享一种图片预览功能吧。

首先在这里先谢谢yanghuiLu大神分享的图片预览功能&＃xff0c;我根据他分享的项目&＃xff0c;做出了一点更改。

原文&＃xff1a;https://www.cnblogs.com/huoan/p/10337872.html