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,一经查实,立即删除!

相关文章

基于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 岭回归分析案…

支付宝沙箱对接(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…

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

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

Mysql系列-Binlog主从同步

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

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

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

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

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

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

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

起底:Three.js和Cesium.js,二者异同点,好比全科和专科.

Three.js和Cesium.js是两个常用的webGL引擎,很多小伙伴容易把它们搞混淆了,今天威斯数据来详细介绍一下,他们的起源、不同点和共同点,阅读后你就发现二者就像全科医院和专科医院的关系,很好识别。 一、二者的起源 Th…

性能测试相关理解---性能测试流程(二)

六、性能测试流程(如何做性能测试?) 根据学习全栈测试博主的课程做的笔记 1、前期准备– 项目初期就开始,业务需求评审时尽量参与,对业务更深刻的认识(确定哪些是核心业务、哪些可能存在并发请求、确定什么地方会出现瓶颈,方便后…

WebOffice在线编微软Offfice,并以二进制流的形式打开Word文档

在日常办公场景中,我们经常会遇到这种场景:我们的合同管理系统的各种Word,excel,ppt数据都是以二进制数组的形式存储在数据库中,如何从数据库中读取二进制数据,以二进制数据作为参数,然后加载到浏览器的Office窗口&…

【无标题】地平线2西之绝境/Horizon Forbidden West™ Complete Edition(更新:V1.3.57)

游戏介绍 与埃洛伊同行,在危险壮美的边疆之地揭开种种未知的神秘威胁。此完整版可完整享受广受好评的《地平线 西之绝境™》内容和额外内容,包括在主线游戏后展开的后续故事“炙炎海岸”。 重返《地平线》中遥远未来的后末日世界,探索远方的土…

Twitter群发消息API接口的功能?如何配置?

Twitter群发消息API接口怎么申请?如何使用API接口? 为了方便企业和开发者有效地与用户互动,Twitter提供了各种API接口,其中Twitter群发消息API接口尤为重要。AokSend将详细介绍Twitter群发消息API接口的功能及其应用场景。 Twit…

html+css+js贪吃蛇游戏

贪吃蛇游戏&#x1f579;四个按钮控制方向&#x1f3ae; 源代码在图片后面 点赞❤️关注&#x1f64f;收藏⭐️ 互粉必回&#x1f64f;&#x1f64f;&#x1f60d;&#x1f60d;&#x1f60d; 源代码&#x1f4df; <!DOCTYPE html> <html lang"en"&…

tomcat原理、结构、设计模式

1 what 一种web服务器&#xff0c;运行java servlet、jsp技术&#xff0c;能为java web提供运行环境并通过http协议处理客户端请求。即tomcat http服务器 servlet容器。同类产品有jetty Web应用&#xff1a;Web应用是指通过Web浏览器访问的应用程序&#xff0c;它使用Web技术…

平台稳定性里程碑 | Android 15 Beta 3 已发布

作者 / 产品管理副总裁、Android 开发者 Matthew McCullough 从近期发布的 Beta 3 开始&#xff0c;Android 15 达成了平台稳定性里程碑版本&#xff0c;这意味着开发者 API 和所有面向应用的行为都已是最终版本&#xff0c;您可以查阅它们并将其集成到您的应用中&#xff0c;并…

系统架构设计师——计算机体系结构

分值占比3-4分 计算机硬件组成 计算机硬件组成主要包括主机、存储器和输入/输出设备。 主机&#xff1a;主机是计算机的核心部分&#xff0c;包括运算器、控制器、主存等组件。运算器负责执行算术和逻辑运算&#xff1b;控制器负责协调和控制计算机的各个部件&#xff1b;主存…

如何看自己电脑的ip地址?这些方法教你搞定

在数字化时代&#xff0c;网络已经成为我们生活中不可或缺的一部分。对于每一个接入网络的设备来说&#xff0c;IP地址就像是一个独特的身份证&#xff0c;它标识着设备在网络中的位置。对于电脑用户而言&#xff0c;了解如何查看自己电脑的IP地址&#xff0c;不仅有助于我们更…