CSS实现图片裁剪居中(只截取剪裁图片中间部分,图片不变形)

1.第一种方式:(直接给图片设置:object-fit:cover;

.imgbox{width: 100%;height:200px;overflow: hidden;position: relative;img{width: 100%;height: 100%;  //图片要设置高度display: block;position: absolute;left: 0;right: 0;top: 0;bottom: 0;object-fit:cover;  //重要代码}
}

2.第二种方式(给图片设置:object-fit: none; object-position: 50% 50%;

.imgbox{width: 100%;height:200px;overflow: hidden;position: relative;img{width: 100%;height: 100%; //图片要设置高度display: block;position: absolute;left: 0;right: 0;top: 0;bottom: 0;//重要代码object-fit: none; /* 不调整图片大小 */object-position: 50% 50%; /* 图片中心对齐盒子中心 */ }
}

在这里插入图片描述

完成~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/41727.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenCV:解锁计算机视觉的魔法钥匙

OpenCV:解锁计算机视觉的魔法钥匙 在人工智能与图像处理的世界里,OpenCV是一个响当当的名字。作为计算机视觉领域的瑞士军刀,OpenCV以其丰富的功能库、跨平台的特性以及开源的便利性,成为了开发者手中不可或缺的工具。本文将深入…

基于Java+SpringMvc+Vue技术的在线学习交流平台的设计与实现---60页论文参考

博主介绍:硕士研究生,专注于Java技术领域开发与管理,以及毕业项目实战✌ 从事基于java BS架构、CS架构、c/c 编程工作近16年,拥有近12年的管理工作经验,拥有较丰富的技术架构思想、较扎实的技术功底和资深的项目管理经…

AI+若依框架(低代码开发)

提前说明: 文章是实时更新,写了就会更。 文章是黑马视频的笔记,如果要自己学可以点及下面的链接: https://www.bilibili.com/video/BV1pf421B71v/一、若依介绍 1.版本介绍 若依为满足多样化的开发需求,提供了多个版本…

基于jeecgboot-vue3的Flowable流程-集成仿钉钉流程(一)图标svgicon的使用

因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。 1、lowflow这里使用了tsx的动态图标,如下: import ./index.scss import type { CSSProperties, PropType } from vue import { computed, defineComponent, resolv…

MATLAB基础应用精讲-【数模应用】 岭回归(Ridge)(附MATLAB、python和R语言代码实现)

目录 前言 算法原理 数学模型 Ridge 回归的估计量 Ridge 回归与标准多元线性回归的比较 3. Ridge 参数的选择 算法步骤 SPSSPRO 1、作用 2、输入输出描述 3、案例示例 4、案例数据 5、案例操作 6、输出结果分析 7、注意事项 8、模型理论 SPSSAU 岭回归分析案…

Java [ 进阶 ] 深入理解 JVM

✨探索Java基础 深入理解 JVM✨ 深入理解 JVM:结构与垃圾回收机制 Java 虚拟机(JVM)是 Java 程序运行的核心,了解 JVM 的内部结构和垃圾回收机制对优化 Java 应用性能至关重要。本文将深入探讨 JVM 的结构和垃圾回收机制&#…

支付宝沙箱对接(GO语言)

支付宝沙箱对接 1.1 官网1.2 秘钥生成(系统默认)1.3 秘钥生成(软件生成)1.4 golan 安装 SDK1.5 GoLand 代码1.6 前端代码 1.1 官网 沙箱官网: https://open.alipay.com/develop/sandbox/app 秘钥用具下载: https://ope…

序列化、反序列化

java 提供了一种对象序列化的机制,该机制中,一个对象可以被表示为一个字节序列,该字节序列包括该对象的数据、有关对象的类型的信息和存储在对象中数据的类型。 将序列化对象写入文件之后,可以从文件中读取出来,并且对…

Java并发编程-ThreadLocal深入解读及案例实战

文章目录 概述原理使用场景示例最佳实践内存泄漏风险阿里开源组件TransmittableThreadLocal原理和机制使用场景如何使用注意事项ThreadLocal在分布式存储系统edits_log案例中的实践1. 为什么使用`ThreadLocal`?2. 实践案例2.1 缓存日志操作2.2 线程局部的编辑日志状态3. 注意事…

在 Spring 中编写单元测试

单元测试是软件开发过程中不可或缺的一部分,它能有效地提高代码质量,确保代码功能的正确性。在 Spring 应用中,JUnit 和 Mockito 是常用的单元测试工具,而 Spring Test 提供了丰富的测试支持。本文将介绍如何在 Spring 中使用 JUn…

并行处理百万个文件的解析和追加

处理和解析大量文件,尤其是百万级别的文件,是一个复杂且资源密集的任务。为实现高效并行处理,可以使用Python中的多种并行和并发编程工具,比如multiprocessing、concurrent.futures模块以及分布式计算框架如Dask和Apache Spark。这…

物联网时代5G通信技术分析研究一、引言

一、引言 近几年,移动网络技术跟随互联网的不断发展而改革和进步,给平民大众的生活也带来新的尝试与影响。从2G网络的出现,到逐步被社会民众所了解的3G,再到被熟知的且正在服务于大家的4G网络,移动网络技术的发展速度令…

jQuery Mobile 安装指南

jQuery Mobile 安装指南 jQuery Mobile 是一个基于 jQuery 的移动设备友好的网页开发框架,它允许开发者创建响应式网页和应用程序。本指南将详细介绍如何安装 jQuery Mobile,并确保您的开发环境准备好进行移动网页开发。 1. 环境准备 在开始安装 jQuery Mobile 之前,请确…

Mysql系列-Binlog主从同步

原文链接:https://zhuanlan.zhihu.com/p/669450627 一、主从同步概述 mysql主从同步,即MySQL Replication,可以实现将数据从一台数据库服务器同步到多台数据库服务器。MySQL数据库自带主 从同步功能,经过配置,可以实现基于库、表…

B端设计:任何不顾及用户体验的设计,都是在装样子,花架子

B端设计是指面向企业客户的设计,通常涉及产品、服务或系统的界面和功能设计。与C端设计不同,B端设计更注重实用性和专业性,因为它直接影响企业的效率和利益。 在B端设计中,用户体验同样至关重要。不顾及用户体验的设计只是空洞的表…

数据库之索引(二)

目录 一、如何判断数据库的索引是否生效 二、如何评估索引创建的是否合理 三、索引是否越多越好 四、如何处理数据库索引失效 五、是否所有的字段都适合创建索引 一、如何判断数据库的索引是否生效 可以使用EXPLAIN语句查看索引是否正在使用。 例如,假设已经创…

70.Bug:使用list.sort(Comparator.Comping(User::getCreateTime).reverse())空指针异常

1.出错原因&#xff1a;在xml中没有做字段映射 报错语句复现&#xff1a; List<User> listnew ArrayList<>()&#xff1b; xml中进行查询数据&#xff0c;数据存放在list中........... //排序 list.sort(Comparator.Comping(User::getCreateTime).reverse())&…

经典的layui框架,还有人用吗?令人惋惜。

自从layui官网宣布关闭之后&#xff0c;layui框架的用户飞速下滑&#xff0c;以至于到现在贝格前端工场承接的项目中&#xff0c;鲜有要求使用layui框架的&#xff0c;那么个框架还有人用吗&#xff1f; 一、layui没落是不是jquery惹的祸 layui的没落与jQuery无关。layui框架…

Hi3861 OpenHarmony嵌入式应用入门--UDP Server

本篇使用的是lwip编写udp服务端。需要提前准备好一个PARAM_HOTSPOT_SSID宏定义的热点&#xff0c;并且密码为PARAM_HOTSPOT_PSK。 修改网络参数 在Hi3861开发板上运行上述四个测试程序之前&#xff0c;需要根据你的无线路由、Linux系统IP修改 net_params.h文件的相关代码&…

深入理解 Docker 容器技术

一、引言 在当今的云计算和软件开发领域&#xff0c;Docker 容器技术已经成为了一项不可或缺的工具。它极大地改变了应用程序的部署和运行方式&#xff0c;为开发者和运维人员带来了诸多便利。 二、Docker 容器是什么&#xff1f; Docker 容器是一种轻量级、可移植、自包含的…