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

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

写这篇文章对自己的想法做一些总结等

起因: 下载一些素材的时候看到排版方式是(下图)的样子,而且图片基本上都是没有变形,扭曲 就产生了"兴趣",看了看源码 又自己想了几种方式方法;

这个源代码采用JS遍历的方式对每一个图片进行布局

而我打算采用  CSS进行图片的样式布局(暂时只想到了三种方式)

(1)父级相对定位,子级 绝对定位 设置图片居中等比显示




  
  
  
  测试1111111
  


  

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




  
  
  
  测试222222
  


  

(3)采用 object-fit && object-position 的方式进行布局;

这第三种方式我也是在网上找了一些资料查阅对这两个属性不清楚的同学可以查看张鑫旭大佬个人博客章节

半深入理解CSS3 object-position/object-fit属性




  
  
  
  测试3333333
  


  

当然 这三种方法也只是我个人的偏见、有什么不对的地方请私聊我

你可能感兴趣的:(关于Img标签在固定宽高的容器内部以图片比例缩放存在)