网站LOGO
白雾茫茫丶
页面加载中
3月5日
网站LOGO 白雾茫茫丶
记录学习、生活和有趣的事
菜单
  • 热评
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    使用 object-fit 属性完美过渡图片
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    按住ctrl可打开默认菜单

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

    谢明伟 · 原创 ·
    前端开发 · CSS3
    共 1962 字 · 约 1 分钟 · 261
    本文最后更新于2023年12月28日,已经过了67天没有更新,若内容或图片失效,请留言反馈
    object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度, 一般用于 imgvideo 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等
    在我们工作中,经常会遇到附件上传,然后展示多张图片的,这些图片的尺寸大小不一,如果不进行样式的统一设置,看起来会比较不美观,这时我们可以使用 object-fit 属性对其设置。
    1. 先让我们看一下 object-fit 属性的值:
    2. 我们新建一个 html 文件,引入几张高度不一的图片:

      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>

      此时的效果是这样的:

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

      此时图片能保持原有尺寸比例
    5. 如果想改变图片的显示位置,我们可以对其设置 object-position: right top 属性:
    6. 我们还可以使用 object-position 属性来实现图片一些简单的过渡效果:

      html 代码:
      <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 一起使用,用来设置元素的位置,两者结合可以实现很多图片动画效果,有兴趣的可以自行研究一下。

    声明:本文由 谢明伟(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    现在已有

    2

    条评论
    发一条!
    1. 头像
      · · 河北-秦皇岛
      • 等级:Lv.2
      • 角色:访客
      • 在线:三月内
      头像
      沙发

      每天学一个CSS小知识

      评论
      1. · · 广东-深圳
        • 角色:博主
        • 在线:今日
        头像

        生命不息,战斗不止

        评论
    博客logo 白雾茫茫丶 记录学习、生活和有趣的事 51统计 百度统计
    MOEICP 萌ICP备20236860号 ICP 粤ICP备2023007649号 ICP 粤公网安备44030402006402号

    🕛

    本站已运行 2 年 63 天 15 小时 9 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    白雾茫茫丶. © 2022 ~ 2024.
    网站logo

    白雾茫茫丶 记录学习、生活和有趣的事
     
     
     
     
    壁纸