object-fit
发表于|更新于
|浏览量:
能轻易做到别人感觉困难的事是人才;能轻易做到别人所不能做的工作是天才。——西德尼
讲一个小技巧,对于图片裁剪可以用这个属性:object-fit
object-fit 是一个 CSS 属性,用于指定替换元素(如 <img> 和 <video>)内容的尺寸如何适应其容器。它定义了内容如何填充容器的大小,以及是否保持内容的比例
例如:
1 | <div style="width: 400px; height: 400px; overflow: hidden;"> |
相关推荐
2023-04-07
sketch.js
生活中,谅解是可以温厚的宽恕;谅解可以换回感情上的损失。——佚名 分享一个前端项目:https://soulwire.github.io/sketch.js 用途是可以做一些鼠标特效,例如其官网有很多例子: https://soulwire.github.io/sketch.js/ 非常的有趣
2022-06-06
TailwindCss
懒惰象生锈一样,比操劳更能消耗身体;经常用的钥匙,总是亮闪闪的。——富兰克林 分享一个CSS框架,内置了很多css样式: https://www.tailwindcss.cn/ 使用方式: https://www.tailwindcss.cn/docs/installation 注意其不支持IE浏览器 仓库地址:https://github.com/tailwindlabs/tailwindcss 甚至你可以直接在Playground中进行尝试: https://play.tailwindcss.com/
2024-12-01
skew
醉过才知酒浓,爱过才知情重。你不能做我的诗,正如我不能做你的梦。——胡适 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/skew CSS中的skew()函数:打造斜切效果在前端开发中,CSS transform属性为我们提供了强大的工具来操控元素的外观,而skew()函数正是其中一种常用的变换方式。本文将带你详细了解skew()的原理、用法以及它如何为你的网页增添设计灵感。 什么是skew()?skew()是一种 2D 变换函数,用于对元素进行斜切变换。简单来说,它会将元素沿着 X 轴或 Y 轴方向倾斜一定的角度,创造出一种动态的透视效果。它的应用场景广泛,包括按钮动画、卡片设计和图形变换等。 语法1transform: skew(ax, ay); ax:沿 X 轴的倾斜角度(可选,默认值为 0)。 ay:沿 Y 轴的倾斜角度(可选,默认值为 0)。 单位为角度(deg),也可以使用弧度(rad)或其他角度单位。 用法示例1. 基本应用 以下示例将一个矩形沿 X 轴倾斜 20...
2022-08-24
introjs
爱情沉默的地方,责任就要起作用——歌德 introjs是一个前端指引库 官网:https://introjs.com/ github:https://github.com/usablica/intro.js 用法也很简单: 引入: 12npm install intro.js --saveyarn add intro.js 或者 12https://unpkg.com/intro.js/minified/intro.min.jshttps://unpkg.com/intro.js/minified/introjs.min.css 使用: 12345678introJs().setOptions({ steps: [{ intro: "Hello world!" }, { element: document.querySelector('#login'), intro: "Click here to login!" }]}).st...
2020-08-19
js使用for in取动态key参数
It’s a nice day for coding,isn’t it?Ha ha! 今天遇到一种服务端响应的参数,key是动态的 就像这样 我们一般静态key取值就是直接 1data.data.id.username 但这种id是动态的 我们就只能用for in的方式取值了 12345678var data = { "msg": "查询成功!", "code": 200, "data": { "2f793b1baf4b441c99a12d22af6678aa": { "username": "ruben2", "password": null, "userInfo": null, "genderEnum": null }, "59fa61fe88b64df58568a7046f17ab38": { &qu...
2024-10-30
typescript-exercises(四)
取悦于人并不困难,问题只是你是否能够了解别人的喜恶心理。——卡耐基 题目: 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970/*Intro: As we introduced "type" to both User and Admin it's now easier to distinguish between them. Once object type checking logic was extracted into separate functions isUser and isAdmin - logPerson function got new type errors.Exercise: Figure out how to help TypeScript understand types i...

阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog