新站提交
  • 网站:738
  • 待审:0
  • 小程序:15
  • 文章:24489
2021服务器优惠

阿里云:2核2G5M服务器60元/年、2核4G 200元/年、4核8G服务器365元/年 更多...
腾讯云:云产品限时秒杀,爆款1核2G云服务器,首年74元 更多...

object-fit(对象拟合)

object-fit有5个属性:nonecovercontainfillscale-down,它们是用于控制如何调整被替换元素的内容大小的实用程序。

object-fit:none 使用元素的原始大小

以原始大小显示元素的内容,忽略容器大小,使用object-fit:none

<div>
  <img style="width:300px;height:250px;object-fit:none">
</div>

 

object-fit:cover 调整大小以覆盖容器

使用 object-fit:cover 调整元素内容的大小以覆盖其容器。

<div>
  <img style="width:300px;height:250px;object-fit:cover">
</div>

 

object-fit:contain 包含一个元素

使用 object-fit:contain 调整元素内容的大小以使其包含在其容器中。

<div>
  <img style="width:300px;height:250px;object-fit:contain">
</div>

 

 object-fit:fill 拉伸以适应容器

 使用 object-fit:fill 拉伸元素的内容以适应其容器。

<div>
  <img style="width:300px;height:250px;object-fit:fill">
</div>

 

 object-fit:scale-down 如果太大则缩小

 以原始大小显示元素的内容,但在必要时使用 object-fit:scale-down 将其缩小以适合其容器。

<div>
  <img style="width:300px;height:250px;object-fit:scale-down">
</div>

相关文章

  • 如何使用 CSS object-fit 等比缩放和裁剪图像

相关文章:
  • 使用 css object-fit 对象拟合调整图片大小
  • 4个实例演示——美化表单input输入框CSS样式
  • 6款CSS性能检测、审计(audit)工具
  • 一图了解animation-fill-mode: none|forwards|backwards|both各属性值
  • CSS3 图片背景填充文字并实现动画效果
  • 纯CSS3:鼠标移上后(悬停)图片/文字出现扫光效果
  • 深入详解CSS background-size的3个属性值auto、contain和cover
  • 两种方法——在input输入框里放一个搜索小图标
  • 如何使用 CSS object-fit 等比缩放和裁剪图像
  • CSS JS:一款常见的简单大方又实用的移动网页(二级)菜单设计
  •   runsly

    注册时间:

    网站:1 个   小程序:3 个  文章:12 篇

    • 738

      网站

    • 15

      小程序

    • 24489

      文章

    • 335

      会员

    赶快注册账号,推广您的网站吧!
    热门网站