区域等比例缩放

aspect-ratio (方向-比例)

  aspect-ratio: auto 5 / 3
  width:100%
  //通过给定宽度，使用aspect-rotio 设置比例，拥有此属性的元素可按照比例缩放此元素。

代码实现：

img{
width: 100%;
height: 100%;
object-fit: contain;
background-color: #fff;
}

效果图：

直接一步到位，图片保持原有形状，垂直居中，是想要实现的效果~

接下来， 是 object-fit 相关属性的详细介绍：

object-fit
作用： 在原始比例上进行剪切、缩放或拉伸等。

适用： img 和 video 标签。

属性值:
object-fit: fill; [拉伸填充整个容器,不保证保持原始比例]

 

object-fit: contain; [按原始比例进行缩放(等比缩放)]

 

object-fit: cover; [保持原始比例(部分内容可能被剪切)]

 

object-fit: none; [维持原有内容不变]

 

object-fit: scale-down; [如果容器尺寸大于图片尺寸，保持图片原有尺寸；如果容器尺寸小于图片尺寸，用法同contain]

 

object-fit: initial; [设置为默认值]

 

object-fit: inherit; [继承父元素属性]

————————————————
版权声明：本文为CSDN博主「潇xiao雨未歇」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_53985958/article/details/125370459

翻译

搜索

复制