object-fit
发表于|更新于
|浏览量:
能轻易做到别人感觉困难的事是人才；能轻易做到别人所不能做的工作是天才。——西德尼
讲一个小技巧，对于图片裁剪可以用这个属性：object-fit
object-fit 是一个 CSS 属性，用于指定替换元素（如 <img> 和 <video>）内容的尺寸如何适应其容器。它定义了内容如何填充容器的大小，以及是否保持内容的比例
例如：
1 | <div style="width: 400px; height: 400px; overflow: hidden;"> |
相关推荐
2021-05-26
百度地图简单对接
地位越高，自我评价就越高，自信心多强，能力就有多强。我们总能表现出与环境的和谐平等。——赫兹里特 效果如下 跟着官网一步一步来即可 申请成为开发者 然后在应用管理里创建应用 填写信息 点击复制AK 然后复制代码 123456789101112131415161718192021222324252627<!DOCTYPE html> <html><head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <style type="text/css"> html{height:10...
2023-11-10
minio预签名上传前端axios注意事项
不论替人家做了多少好事，不论多么忠心耿耿，看起来，绝不能指望人家感谢你。——托尔斯泰 之前说过了camel+minio实现预签名URL上传 但当时提供的也是后端代码，现在需要前端axios的 axios文档：Axios API | Axios Docs 123456789101112axios({ method: 'PUT', url, headers: { "Content-Type": "application/octet-stream", }, data: new Blob([file]), responseType: "blob"}).then((res) => { console.log({ res })}).catch(console.error) 这里的file就是前端的File对象，我们此处是将其转换为Blob，然后再通过data参数发送，...
2022-05-24
css继承
浅水是喧哗的，深水是沉默的。——雪莱 我们知道CSS中一些属性会被继承：给父节点设置样式，子节点也会生效例如color、font-size之类的 但像widths, margins, padding, 和 borders 不会被继承，如果被继承，设想一下，给父节点加了一个border，里面的每个子孙元素都有一个border，这不是我们通常想要的效果 如何来控制这些属性呢？ CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。 inherit 设置该属性会使子元素属性和父元素相同。实际上，就是 “开启继承”. initial 设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。 unset 将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样 这里有一个简单的demo： 12345678910111213141516171819202122232425262728293031<div> <h2> ...
2022-11-08
flexboxdefense
理解绝对是养育一切友情之果的土壤——威尔逊 分享一个还不错的网站： http://www.flexboxdefense.com/ 其可以通过塔防游戏的方式，来让玩家学习flex布局 一共12关，每一关都精心设计
2022-06-20
虚拟列表
我来到这个世界，为了看看太阳和蓝色的地平线。——《城门开》 分享一个vue虚拟列表的组件： https://github.com/tangbc/vue-virtual-scroll-list 官方文档： https://tangbc.github.io/vue-virtual-scroll-list 沙盒： https://codesandbox.io/s/live-demo-virtual-list-e1ww1 使用方式： 1pnpm install vue-virtual-scroll-list --save 示例： 12345678910111213141516171819202122232425<template> <div> <virtual-list style="height: 360px; overflow-y: auto;" // make list scrollable :data-key="'uid'" :data-sources=&q...
2026-01-18
AionUi
志士惜年，贤人惜日，圣人惜时。——魏源 AionUi：一款真正“本地优先”的多代理 Cowork 桌面应用AionUi 是一款免费的本地开源桌面应用，用来给你的编码代理和指令工具提供一个轻量但专业的工作空间。它的定位非常明确：Cowork for Gemini CLI、Claude Code、Codex、Opencode、Qwen Code、Goose CLI、Auggie 等等。简单理解，就是把这些分散的代理能力“装进一个统一的生产环境”，在日常工程节奏里更稳定地协作与交付。 项目主页：aionui.com 源码仓库：iOfficeAI/AionUi 技术栈：TypeScript、Electron、React、i18next、better‑sqlite3 等 AionUi 不是“又一个 WebUI”，它强调的是“本地优先”和“工程化”：自带跨平台打包流程、主进程级别的持久化数据库、成熟的国际化与主题系统，以及围绕 UI/UX 设计的辅助知识库。下面从几个关键模块拆开聊聊它的味道与做工。 跨平台构建：Electron Forge + electron...