一种图片展示的完美方案，图片展示，object-fill
通常一般的处理
<style>.img-container {width: 300px;height: 200px;background: #f60;}img {width: 100%;height: 100%;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>
但是如果照片尺寸不符合这个容器的长宽比例，就裂开了
<style>.img-container {width: 100px;height: 200px;background: #f60;}img {width: 100%;height: 100%;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>
解决图片现实的困局，使用object-fit属性：
contain
被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
将会被缩放，在填充的时候会保证宽高比，保证保持宽高比的情况下会添加"黑边"（优点：图片一定会被全貌展示；缺点：黑边的宽度把握不住）
<style>.img-container {width: 150px;height: 300px;background: #f60;}img {width: 100%;height: 100%;object-fit: contain;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>
cover
保证图片宽高比的同时，会充满整个内容区域，会进行裁剪。不会全貌展示，但是看着比较舒适，具体展示哪一部分，裁剪哪一部分，不可控
<style>.img-container {width: 200px;height: 300px;background: #f60;}img {width: 100%;height: 100%;object-fit: cover;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>
fill
充满整个内容区域，如果宽高比与内容框不相匹配，那就拉伸图片，以适应内容区（这个属性比较鸡肋，跟裂开的代码别无而致）
<style>.img-container {width: 600px;height: 300px;background: #f60;}img {width: 100%;height: 100%;object-fit: fill;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>
none
被替换内容将==维持原有的尺寸==。当内容大于容器的时候回进行裁剪，当内容小于容器的时候，会进行居中显示
<style>.img-container {width: 100px;height: 200px;background: #f60;}img {width: 100%;height: 100%;object-fit: none;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>
<style>.img-container {width: 600px;height: 400px;background: #f60;}img {width: 100%;height: 100%;object-fit: none;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>
<style>.img-container {width: 100px;height: 400px;background: #f60;}img {width: 100%;height: 100%;object-fit: none;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>
scale-down
这个相当于是container 和none 两者的属性，具体使用哪一个，看哪一个的占地内容较少
<style>.img-container {width: 600px;height: 400px;background: #f60;}img {width: 100%;height: 100%;object-fit: contain;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>
<title>Document</title><style>.img-container {width: 600px;height: 400px;background: #f60;}img {width: 100%;height: 100%;object-fit: scale-down;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>
相关文章：
一种图片展示的完美方案，图片展示，object-fill
通常一般的处理 <style>.img-container {width: 300px;height: 200px;background: #f60;}img {width: 100%;height: 100%;}</style> </head> <body><div class"img-container"><img src"./行道树.png" alt""&g…...
社科院杜兰金融管理硕士——考研初试成绩已出，关于分数“6线”你有了解吗
多地公布了2023考研初试成绩查询时间，部分省份今日就能查询到考研初试成绩，考研学子们此刻的心情应该是很忐忑吧，关于分数的“6线”你都知道有哪些吗？我们跟随社科院杜兰金融管理硕士项目一起去了解一下。1.国家线教育部依据硕士生…...
Talk | 清华大学交叉信息研究院助理教授杜韬：利用计算方法探究流固耦合
本期为TechBeat人工智能社区第474期线上Talk！ 北京时间2月15日(周三)20:00，清华大学交叉信息研究院助理教授——杜韬的Talk将准时在TechBeat人工智能社区开播！ 他与大家分享的主题是: “利用计算方法探究流固耦合”，届时将介绍流固…...
2023年，智能家居实体门店如何选品？
作者 | 启明 编辑 | 小沐 出品 | 智哪儿 zhinaer.cn2023年，是智能家居实体门店的机会与破局之年，作为智能家居实体门店老板，我们应该具备什么样的增长思维呢？上篇文章智哪儿谈了智能家居增长思维之流量思维 ，这篇文章我…...
数据分析-深度学习 NLP Day2关键词提取案例
训练一个关键词提取算法需要以下几个步骤：1）加载已有的文档数据集；2）加载停用词表；3）对数据集中的文档进行分词；4）根据停用词表，过滤干扰词；5）根据…...
LeetCode题解：938. 二叉搜索树的范围和，BFS，JavaScript，详细注释
原题链接： https://leetcode.cn/problems/range-sum-of-bst/ 解题思路： 对于二叉搜索树的任意节点，左子树的所有节点值都小于它的值，右子树的所有节点值都小于它的值。使用队列进行BFS搜索，如果当前节点的值小于low&…...
istio初步了解
istio 控制平面： Pilot：管理和配置部署在特定istio服务网格中的所有sidecar代理实例，管理sidecar代理之间的路由流量规则，并配置故障恢复功能，如超时、重试、熔断。 Citadel：istio中负责身份认证和证书管…...
【模板】用HTML编写邮件正文 | 各大邮箱几乎都会过滤css样式、js脚本等效果，如何用基础HTML编写？
用HTML编写邮件正文 文档 编码格式utf-8（使用记事本或其他工具打开，在文件->另存为，编缉选择UTF-8格式） 文档大小在15kb以内 样式 页面宽度：600px~800px 尽量用特殊元素以及元素属性代替样式 样式全部写为内联样式…...
华为云计算之双活容灾
双活（HyperMetro）本地双活：距离≤10km同城双活：距离＞10km没有主备之分，只有本端数据中心和远端数据中心。当一个数据中心的设备故障或数据中心故障，业务会自动切换到另一个数据中心继续运行&…...
ASEMI高压MOS管ASE20N65SE体积，ASE20N65SE大小
编辑-Z ASEMI高压MOS管ASE20N65SE参数： 型号：ASE20N65SE 漏极-源极电压（VDS）：650V 栅源电压（VGS）：30V 漏极电流（ID）：20A 功耗（P…...
resp连接redis服务器
修改redis的配置文件使得windows的图形界面客户端可以连接redis服务器 resp安装好以后，可以在linux端打开redis.conf中做以下操作，使得windows的图形界面客户端可以连接redis服务器 方法一： 1，在redis.conf文件中添加bind 在文件…...
七天实现一个分布式缓存
目录教程来源目的思路缓存淘汰(失效)算法：FIFO，LFU 和 LRUFIFO(First In First Out)LFU(Least Frequently Used)LRU(Least Recently Used)实现Lru查找功能删除新增/修改测试单机并发缓存主体结构 Group回调 GetterGroup 的定义Group 的 Get 方法HTTP 服务…...
电子招标采购系统源码功能清单
一、立项管理 1、招标立项申请 功能点：招标类项目立项申请入口，用户可以保存为草稿，提交。 2、非招标立项申请 功能点：非招标立项申请入口、用户可以保存为草稿、提交。 3、采购立项列表 功能点：对草稿进行编辑&#x…...
mysql数据库基础知识
一.mysql基本命令 1.基础常用命令 mysql -uroot -p密码;(也可以不带密码，之后输入) 本地登录 mysql -h 登录ip -p 端口(通常3306） -uroot -p密码; 远程登录 desc 表名;查看表的各个字段的属性，以及自增键 mysqldump -u用户 -p 数据库名 >…...
CAN总线通信
CAN总线通信 CAN 是控制器局域网络（Controller Area Network） 的缩写，是 ISO 国际标准化的串行通信协议。 CAN是半双工通信 CAN总线特点 (1) 多主控制 在总线空闲时，所有的单元都可开始发送消息（多主控制…...
MATLAB/Simulink 通信原理及仿真学习（二）
文章目录MATLAB/Simulink 通信原理及仿真学习（二）simulink仿真常用的Simulink库1. 信号源模块库2. 数序运算模块3. 信号输出模块库4.仿真搭建5.搭建自己的库6.S-函数编写MATLAB/Simulink 通信原理及仿真学习（二） simulink仿真 交…...
CentOS7 防火墙（firewall）的操作命令
CentOS7 防火墙（firewall）的操作命令 安装：yum install firewalld 1、firewalld的基本使用 启动： systemctl start firewalld 查看状态： systemctl status firewalld 禁用，禁止开机启动： s…...
文献工具汇总：论文查找、文献管理、文献翻译
科研人员论文哪里找？文献如何管理？本文给推荐一些提高论文阅读写作效率的一些资料，包括查找论文、文献管理、文献翻译等方面。 一、查找文献 PMC（Pubmed Cenral) Pubmed官方系统中，将免费的全文集中在此，…...
SQL零基础入门学习（三）
SQL零基础入门学习（二） SQL WHERE 子句 WHERE 子句用于提取那些满足指定条件的记录。 SQL WHERE 语法 SELECT column1, column2, ... FROM table_name WHERE condition;参数说明： column1, column2, …：要选择的字段名称&…...
苹果手机如何快速的直接从相册里面的图片提取文字？
//在线工具地址https://ocr.bytedance.zj.cn/image/ImageText在当今信息爆炸的时代，图文并茂已经成为了一个广告宣传的常用方式。然而，图片中的文字信息往往难以获取，尤其对于那些需要快速获取信息的人们来说，阅读图片中的文字会是…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台，覆盖应用全生命周期测试需求，主要提供五大核心能力： 测试类型检测目标关键指标功能体验基…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时，需结合业务场景设计数据流转链路，重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点： 一、核心对接场景与目标 商品数据同步 场景：将1688商品信息…...
JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案
JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停 1. 安全点（Safepoint）阻塞 现象：JVM暂停但无GC日志，日志显示No GCs detected。原因：JVM等待所有线程进入安全点（如…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper（简称 DM）是 Linux 内核中的一套通用块设备映射框架，为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程，并配以详细的…...
LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》
这段 Python 代码是一个完整的 知识库数据库操作模块，用于对本地知识库系统中的知识库进行增删改查（CRUD）操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 📘 一、整体功能概述 该模块…...
安卓基础（Java 和 Gradle 版本）
1. 设置项目的 JDK 版本 方法1：通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分，设置 Gradle JDK 方法2：通过 Settings File → Settings... (或 CtrlAltS)…...
WPF八大法则：告别模态窗口卡顿
⚙️ 核心问题：阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程，导致后续逻辑无法执行： var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题：…...
【SpringBoot自动化部署】
SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一，能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时，需要添加Git仓库地址和凭证，设置构建触发器（如GitHub…...
嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程（6.3）
目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 编辑编辑 UDP的特征 socke函数 bind函数 recvfrom函数（接收函数） sendto函数（发送函数） 五、网络编程之 UDP 用…...