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

news2025/2/23 16:40:30

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.coloradmin.cn/o/1899307.html

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

相关文章

JavaDS预备知识

集合框架 Java 集合框架 Java Collection Framework ,又被称为容器 container ,是定义在 java.util 包下的一组接口 interfaces和其实现类 classes 。 其主要表现为将多个元素 element 置于一个单元中,对数据进行创建(Create)、读取(Retrieve…

笔记本休眠后自动关闭所有程序

关于主动进入休眠后,笔记本过一晚第二天会关闭所有程序,开始还以为,笔记本没电了,或者公司停电了导致笔记本没电关机,排查后发现不是。。。 原因是笔记本电脑默认设置休眠20分钟后自动关闭硬盘。 解决方案&#xff1a…

K8S 部署 EFK

安装说明 系统版本为 Centos7.9 内核版本为 6.3.5-1.el7 K8S版本为 v1.26.14 ES官网 开始安装 本次安装使用官方ECK方式部署 EFK,部署的是当前的最新版本。 在 Kubernetes 集群中部署 ECK 安装自定义资源 如果能打开这个网址的话直接用这个命令安装,打不开的话…

STM32学习历程(day3)

通过GPIO点灯 首先先创建工程 这步比较繁琐 可以去参考江协科技[3-2]章节 想要驱动LED灯 要先使能时钟、然后再初始化、GPIO模式、引脚、以及输出速率 可以查看RCC的头文件 能看到三个使能函数 使能AHB、APB2、APB1 ,GPIO用APB2这个函数、 通过看RCC库函数的源码…

A4-C四驱高防轮式巡检机器人

在当今数字化和智能化迅速发展的时代,旗晟智能带来了一款革命性的创新产品——A4-C四驱高防轮式巡检机器人。这款机器人以其卓越的性能和多功能性,为工业巡检领域带来了全新的解决方案。 一、产品亮点 1、四驱动力与高防护设计 四驱高防轮式巡检机器人…

AWS云服务器的竞争优势

亚马逊网络服务(AWS)作为全球最大的云计算平台,在激烈的市场竞争中一直保持领先地位。相较于其他云服务提供商,AWS云服务器具有多方面的显著优势,使其成为众多企业和开发者的首选,我们结合九河云的分析一起…

使用POI实现Excel文件的读取(超详细)

目录 一 导入poi相关的maven坐标 二 实现创建并且写入文件 2.1实现步骤 2.2实现代码 2.3效果展示 ​编辑 2.4注意 三 实现从Excel文件中读取数据 3.1实现步骤 3.2实现代码 3.3结果展示 一 导入poi相关的maven坐标 <!-- Apache poi --><dependency><gro…

Spring学习04-[Spring容器核心技术AOP学习]

AOP学习 AOP介绍使用对业务方法添加计算时间的增强 EnableAspectJAutoProxyAOP的术语通知前置通知Before后置通知After返回通知AfterReturning AOP介绍 如何在Spring中创建一个所谓切面? AspectComponent通知切点切面里面的代码怎么运行在业务方法(之前、之后)&#xff1f; 通…

conda环境变量+常用操作+配置镜像源

、1、conda环境变量配置 根据我的上篇文章&#xff0c;应该都已经安装了conda和pycharm&#xff0c;然后可能会出现conda的没有配置到系统的环境变量上&#xff0c;这里首先教大家如何配置系统的环境变量&#xff0c;在进行后续操作&#xff0c;如果环境变量已经配置完毕可以自…

第4-5天:30余种加密编码和资产架构端口应用CDNWAF站库分离负载均衡

文章目录 前言知识点常见加密编码等算法解析 资产架构&端口&应用&CDN&WAF&站库分离&负载均衡资产架构番外安全考虑阻碍 前言 在安全测试中常见的敏感信息密码等会采用加密方式&#xff0c;因此作为一名安全人员要了解常见加密。 知识点 主要有存储加…

离线安装arm架构Firefox

离线安装Firefox浏览器及其插件在ARM架构的设备上&#xff08;如树莓派、部分Android设备或其他采用ARM处理器的Linux系统&#xff09;可能需要一些特殊步骤&#xff0c;因为默认情况下&#xff0c;大多数浏览器和插件都是为x86架构设计的。对于ARM架构&#xff0c;你需要找到特…

模型优化调参利器贝叶斯优化bayesian-optimization实践

早在之前很多项目尤其是预测类型的项目中&#xff0c;就已经比较广泛地在实用贝叶斯优化库了&#xff0c;这是一个非常出色的纯python实现的项目&#xff0c;地址在这里&#xff0c;如下所示&#xff1a; 写这篇文章主要有两个目的&#xff0c;一方面是觉得这个工具库挺不错的值…

不花钱如何让网站启用HTTPS访问

在互联网的世界里&#xff0c;数据安全已经成为了每个网站和用户都不得不面对的问题。近期&#xff0c;网络信息泄露事件频发&#xff0c;让越来越多的网站开始重视起用户数据的安全性&#xff0c;因此启用HTTPS访问成为了一个网站必须要部署的。 HTTPS协议&#xff0c;作为HT…

Docker:Docker网络

Docker Network 是 Docker 平台中的一项功能&#xff0c;允许容器相互通信以及与外界通信。它提供了一种在 Docker 环境中创建和管理虚拟网络的方法。Docker 网络使容器能够连接到一个或多个网络&#xff0c;从而使它们能够安全地共享信息和资源。 预备知识 推荐先看视频先有…

算法金 | 平均数、众数、中位数、极差、方差,标准差、频数、频率 一“统”江湖

大侠幸会&#xff0c;在下全网同名「算法金」 0 基础转 AI 上岸&#xff0c;多个算法赛 Top 「日更万日&#xff0c;让更多人享受智能乐趣」 抱个拳&#xff0c;送个礼 更多内容&#xff0c;见微*公号往期文章&#xff0c;阅读人数已破 10, 000&#xff1a;协方差、方差、标准…

windows下使用编译opencv在qt中使用

记录一下&#xff1a;在windows下qt使用opencv 1、涉及需要下载的软件 CMake 下载地址opecnv下载地址mingw(需要配置环境变量) 这个在下载qt的时候可以直接安装一般在qt的安装路径下的tool里比如我的安装路径 (C:\zz\ProgramFiles\QT5.12\Tools\mingw730_64) 2、在安装好CMake…

植物大战僵尸杂交版2.2手机安装方法以及全屏方法

大家好&#xff0c;我是坤坤黑科技。大家期待了很久的植物大战僵尸2.2版本也在昨天更新了&#xff0c;今天给大家分享最新的植物大战僵尸杂交版2.2版本手机的安装方法以及全屏方法~ 植物大战僵尸杂交版2.2&#xff08;安卓&#xff09; 1.首先我们需要先下载好Winlator模拟器~…

Vue iview-ui 被tooltip包裹的标题,点击跳转后,提示框不消失

tooltip包裹的标题&#xff0c;点击跳转后&#xff0c;提示框不消失 就会有这种显示问题 下面这种错误方法不可行&#xff0c;解决办法往下翻 css写得没错&#xff0c;问题出在Javascript当中的 getElementsByClassName(“xxabc”)&#xff0c; 这个方法得到的是一个由class&q…

Facebook社群对于个人和品牌的价值探讨

Facebook社群作为连接兴趣和人群的重要平台&#xff0c;不仅为个人提供了交流互动的空间&#xff0c;也成为品牌建立和发展的重要途径。本文将深入探讨Facebook社群在个人和品牌发展中的多重价值&#xff0c;以及如何有效利用这些社群来实现个人和品牌的目标。 1. 社群对个人的…

使用 docker buildx 构建跨平台镜像

buildx是Docker官方提供的一个构建工具&#xff0c;它可以帮助用户快速、高效地构建Docker镜像&#xff0c;并支持多种平台的构建。使用buildx&#xff0c;用户可以在单个命令中构建多种架构的镜像&#xff0c;例如x86和arm架构&#xff0c;而无需手工操作多个构建命令。此外bu…