object-fit
发表于|更新于
|浏览量:
能轻易做到别人感觉困难的事是人才;能轻易做到别人所不能做的工作是天才。——西德尼
讲一个小技巧,对于图片裁剪可以用这个属性:object-fit
object-fit 是一个 CSS 属性,用于指定替换元素(如 <img> 和 <video>)内容的尺寸如何适应其容器。它定义了内容如何填充容器的大小,以及是否保持内容的比例
例如:
1 | <div style="width: 400px; height: 400px; overflow: hidden;"> |
相关推荐
2025-03-03
vue-loading-overlay
只要有一双真诚的眼睛陪我哭泣,就值得我为生命受苦。——罗曼·罗兰的《欣悦的灵魂》 https://github.com/ankurk91/vue-loading-overlay demo: https://ankurk91.github.io/vue-loading-overlay/ Vue Loading Overlay:简洁高效的加载指示器组件介绍在现代Web应用中,为了提升用户体验,加载指示器是一个必不可少的组件。尤其在处理异步请求或其他耗时操作时,加载指示器可以有效地告知用户当前的状态。Vue Loading Overlay 是一个为 Vue.js 应用提供全屏加载指示器的组件,简洁高效,易于集成和使用。 本文将介绍什么是 Vue Loading Overlay、其主要功能及其使用方法,并展示如何在项目中集成和使用这个组件。 什么是 Vue Loading Overlay?Vue Loading Overlay 是一个 Vue.js 组件,用于在页面加载时显示全屏或局部加载指示器。它可以轻松集成到 Vue.js 项目中,通过简单的配置和调用即可实现加载指示器的显示和隐...
2021-12-16
elementUI字体文件丢失问题
见贤思齐焉,见不贤而内自省也。——《论语》 今天引入elementUI时 官方文档说的CDN引入方式为: CDN目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。 1234<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> 我想下载到本地嘛,就直接打开这两个链接,另存为到本地了 然后发现字体文件丢失…最后解决方式是打开 https://unpkg.com/browse/element-ui@2.15.6/lib/theme-chalk/fonts/ 然后下载其中的字体文件...
2025-06-27
edgeone-pages
天下之事不难于立法,而难于法之必行。一一明·张居正 EdgeOne Pages:腾讯云推出的现代前端开发与部署新体验在现代 Web 开发持续演进的大潮中,开发者对前端托管、性能优化、无服务器化和全球加速的需求日益提升。腾讯云基于其强大的 EdgeOne 边缘计算基础设施,推出了面向开发者的全新前端平台——EdgeOne Pages,为构建、部署和加速静态站点及无服务器应用带来极致体验。 一、什么是 EdgeOne Pages?EdgeOne Pages 是一站式前端开发与部署平台,专为现代 Web 项目量身定做。它不仅支持静态页面的极速托管,还内置边缘 Serverless 能力,让你用 JavaScript 直接在全球边缘节点编写动态服务,无需管理服务器或基础设施,轻松实现低延迟、全球可用的前后端一体化应用。 二、核心产品优势1. 全球加速,极致性能依托腾讯云分布全球的边缘节点,EdgeOne Pages 能将静态资源自动缓存到离用户最近的位置,大幅提升页面打开速度和访问体验。无论访客来自国内外,网站都能保持高可用和低延时。 2. 极简部署,自动化上线集成高效的自动...
2022-06-25
fokus
死亡,就是你加上这个世界,再减去你。——卡尔维诺 分享一个好玩的开源项目,演示地址: https://lab.hakim.se/fokus/ 代码仓库:https://github.com/hakimel/Fokus 演示效果: 当我们在页面上框选时,会在页面上加个蒙版,高亮框选区域 使用方式,首先下载fokus.min.js 官方链接 备用链接 然后引用 1<script src="/js/fokus.min.js"></script> 最后编写代码(随便写点) 1234567891011121314151617181920212223242526272829303132333435363738394041<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont...
2022-04-23
drag事件
生活最沉重的负担不是工作,而是无聊。——罗曼·罗兰 首先是MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API 然后是代码: 123456789101112131415161718192021222324252627282930313233343536373839404142<!DOCTYPE html><html> <head> <style> .drop-container{ width: 200px; height: 200px; border: 1px solid red; background: #eee; } .drag-ball{ w...
2022-02-04
js原型对象
不存在十全十美的文章,如同不存在彻头彻尾的绝望。——《且听风吟》 我们首先定义一个对象 1234567891011class Person { constructor(name,age) { this.name = name; this.age = age; } toString() { return '(' + this.name + ', ' + this.age + ')'; }};let ruben = new Person("ruben",21);console.log(ruben.toString()) 打印结果为: 1(ruben,21) 我们可以使用Person.prototype去获取Person的原型对象,从而更改类其中的方法 1234567Person.prototype.toString = function(){ return "Person{&q...

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