使用 object-fit 属性完美过渡图片

白雾茫茫丶

于 2024-04-18 15:01:41 发布

阅读量667

点赞数 15

分类专栏：前端开发文章标签： CSS3

本文链接：https://blog.csdn.net/qq_36117388/article/details/137921933

版权

前端开发专栏收录该内容

24 篇文章 1 订阅

订阅专栏

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度，一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等
在我们工作中，经常会遇到附件上传，然后展示多张图片的，这些图片的尺寸大小不一，如果不进行样式的统一设置，看起来会比较不美观，这时我们可以使用 object-fit 属性对其设置。

先让我们看一下 object-fit 属性的值：
我们新建一个 html 文件，引入几张高度不一的图片：

<head>
  <title>CSS属性 object-fit</title>
  <style>
    div {
      text-align: center;
      margin-top: 200px;
    }

    div img {
      width: 200px;
    }
  </style>
</head>

<body>
  <div>
    <img src="./Images/1.jpg">
    <img src="./Images/2.jpg">
    <img src="./Images/3.jpg">
    <img src="./Images/4.jpg">
  </div>
</body>

</html>

此时的效果是这样的：
在这里插入图片描述

我们设置统一的高度，此时的图片会失真变形：
我们对其设置 object-fit: cover 样式：

此时图片能保持原有尺寸比例

如果想改变图片的显示位置，我们可以对其设置 object-position: right top 属性：
我们还可以使用 object-position 属性来实现图片一些简单的过渡效果：

<style>
  div {
    text-align: center;
    margin-top: 200px;
  }

  div img {
    width: 400px;
    height: 200px;
    object-fit: cover;
    object-position: right top;
    transition: .5s all;
  }

  div img:hover {
    object-position: left bottom;
  }
</style>

在这里插入图片描述

object-position 属性一般与 object-fit
一起使用，用来设置元素的位置，两者结合可以实现很多图片动画效果，有兴趣的可以自行研究一下。

白雾茫茫丶

关注

15
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
使用 object-fit 属性完美过渡图片

这篇文章介绍了CSS属性object-fit的用法。object-fit属性用于指定元素的内容如何适应指定容器的高度和宽度。该属性一般适用于img和video标签，可以进行剪切、缩放或拉伸操作。文章中展示了通过object-fit属性来统一设置多张图片的样式，保持原始比例并改变显示位置的示例，以及使用object-position属性实现简单的过渡效果。
复制链接

扫一扫