关于Img标签在固定宽高的容器内部以图片比例缩放存在关于Img标签在固定宽高的容器

关于Img标签在固定宽高的容器内部以图片比例缩放存在
写这篇文章对自己的想法做一些总结等
起因: 下载一些素材的时候看到排版方式是（下图）的样子，而且图片基本上都是没有变形，扭曲就产生了"兴趣",看了看源码又自己想了几种方式方法;
这个源代码采用JS遍历的方式对每一个图片进行布局
而我打算采用CSS进行图片的样式布局（暂时只想到了三种方式）
（1）父级相对定位，子级绝对定位设置图片居中等比显示

测试1111111 - 锐客网*{margin:0; padding:0; }div{ width: 200px; height: 200px; border: 1px solid #000; margin-left: 15px; margin-bottom: 15px; float: left; overflow: hidden; position: relative; }div img { position: absolute; max-width: 100%; top: 0; left: 0; right: 0; bottom: 0; margin: auto; /* 设置四个值为零,margin:auto; 可以设置元素水平垂直居中 */ } 文章图片文章图片文章图片

（2）采用 img 标签为行内快的特性进行等比

测试222222 - 锐客网*{margin:0; padding:0; }div{ width: 200px; height: 200px; line-height: 200px; border: 1px solid #000; margin-left: 15px; margin-bottom: 15px; float: left; text-align: center; overflow: hidden; } div img { /*采用行内块的特性进行图片的垂直居中特性图片设置最大宽度和最小宽度; vertical-align--> 文字对齐方式采用middle 居中 */ max-width: 200px; max-height: 200px; vertical-align: middle; } 文章图片文章图片文章图片

（3）采用 object-fit && object-position 的方式进行布局；
这第三种方式我也是在网上找了一些资料查阅对这两个属性不清楚的同学可以查看张鑫旭大佬个人博客章节
半深入理解CSS3 object-position/object-fit属性

测试3333333 - 锐客网*{margin:0; padding:0; } div{ width: 200px; height: 200px; border: 1px solid #000; margin-left: 15px; margin-bottom: 15px; float: left; overflow: hidden; position: relative; } div img { /* 宽高100% 设置的是 IMG 标签的关于内容src的宽高属性会根据内容自动填充,会产生不完整的现象 */ width: 100%; height: 100%; object-fit:none; /* 默认情况显示 */ object-position: center; /* 图片内容采用 center 方式进行居中 */ } 文章图片文章图片文章图片