object-fit
发表于|更新于
|浏览量:
能轻易做到别人感觉困难的事是人才;能轻易做到别人所不能做的工作是天才。——西德尼
讲一个小技巧,对于图片裁剪可以用这个属性:object-fit
object-fit 是一个 CSS 属性,用于指定替换元素(如 <img> 和 <video>)内容的尺寸如何适应其容器。它定义了内容如何填充容器的大小,以及是否保持内容的比例
例如:
1 | <div style="width: 400px; height: 400px; overflow: hidden;"> |
相关推荐
2022-02-05
标签模板
不慕古,不留今,与时变,与俗化。——《管子·正世》 按照阮一峰ES6入门中写到的 我们可以使用函数名+模板字符串写法来调用函数,例如: 定义这样一个函数 123function templateFun(arguments){ return `Hello ${arguments[0]}!`} 这里简单用模板字符串,返回Hello +参数数组第一项元素+! 我们普通调用写法: 1templateFun(['Ruben']) 输出'Hello Ruben!' 我们如果使用标签模板,写法如下: 1templateFun`Ruben` 如果其中有变量,则会进行剥离拆分,我们对函数稍加修改,参数改为可变参数 12345function templateFun(...arguments){ console.log(arguments) return `Hello ${arguments}!`}templateFun`Ruben${'...
2023-08-27
css-animations
一切鬼魂们的叫唤无不低微,然有秩序,与火焰的怒吼,油的沸腾,铜叉的震颤和鸣,造成醉心的大乐,布告三界:地下太平。──鲁迅《失掉的好地狱》 分享一个网站 https://css-animations.io/ 可以让我们学习css动画
2023-06-04
将图片转换为像素风svg
千秋青史难欺。——张廷玉 链接:https://codepen.io/rodzyk/pen/dyjzExz 效果如下: 需要下载对应的svg也很简单 复制出来,再粘贴到本地新建xxx.svg文件内即可
2022-07-10
vue3配置jsx
正如自然忌讳真空一样,人类是讨厌平等的。——《我是猫》 首先按照官方文档创建项目: 1npm init vite hello-vue3 -- --template vue # 或 yarn create vite hello-vue3 --template vue 然后我们安装jsx插件:https://github.com/vuejs/babel-plugin-jsx 1npm install @vue/babel-plugin-jsx -D 然后配置vite.config.js 123456789101112import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vuejsx from "@vue/babel-plugin-jsx"// https://vitejs.dev/config/export default defineConfig({ plugins: [vue(),...
2025-03-28
utterances
多听,少说,接受每一个人的责难,但是保留你的最后裁决。——莎士比亚《哈姆雷特》 GitHub - utterance/utterances: :crystal_ball: A lightweight comments widget built on GitHub issues https://utteranc.es/ Utterances:基于 GitHub Issues 的超轻量评论系统 如果你正在为静态博客寻找一款干净、开源、可控又易用的评论系统,那么你可能会喜欢这款工具——utterances。 这是一款用一句话就能说明白的工具: Utterances 是一个基于 GitHub Issues 的轻量级评论系统,每一条评论本质上都是一条 issue 回复。 为什么选择 utterances?相比传统的评论插件,它有以下几个显著优势: 🚀 超轻量:仅一个 iframe,不注入额外 JS,加载速度极快 🔐 隐私友好:不收集用户数据,不追踪 🧠 天然反垃圾评论:用户必须使用 GitHub 登录评论 ✍️ 支持 Markdown、表情、代码块,评论体...
2022-08-21
webpack
细砂般数不尽的星,有颗向我眨眼睛。——芥川龙之介《侏儒的话》 摘自芥川龙之介的《侏儒的话》。 首先是官方文档:https://webpack.docschina.org/ 本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。 接下来我们跟着快速上手一下,将一个普通的html文件使用webpack改造 https://webpack.docschina.org/guides/getting-started 创建目录,安装依赖 1234mkdir webpack-democd webpack-demonpm init -ynpm install webpack webpack-cli --save-dev 新建index.html 1234567891011<!DOCTYPE html><html&...
