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.pswp.cn/web/41727.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/41727.shtml
英文地址,請注明出處:http://en.pswp.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 容器是一種輕量級、可移植、自包含的…