object-fit img图片显示方式

使用object-fit属性使图片不变形 不压缩

原来的图片这样子 932*1500的图片的高被限制了 看起来扁扁的

使用object-fit属性可解决这个问题
在img标签的样式上加上object-fit: contain; 图片即可显示完全

object-fit属性的其他值

• object-fit:fill

• object-fit:contain

• object-fit:cover

• object-fit:none

• object-fit:scale-down

• object-fit:initial

• object-fit:inherit

  fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
  contain 保持原有尺寸比例。内容被缩放。
  cover 保持原有尺寸比例。但部分内容可能被剪切。
  none * 保留原有元素内容的长度和宽度，也就是说内容不会被重置。*
  scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
  initial 设置为默认值
  inherit 从该元素的父元素继承属性