多圖片大小相同,且不被拉伸效果

原創 rambler_designer 2020-06-08 02:48

兩種實現思路

第一種,也是我常用的一種,首先img外套一層div,控制div的寬度

img設置樣式width:100%,設定一個高度,並通過添加object-fit:cover控制大小一致

 

或者還可以通過background-size:cover

實現效果

添加之前

添加之後 

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Facebook 如何做大規模服務的自主測試

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragr

Paul Marinescu 2021-12-21 10:54:01

微軟終於被罵夠了？迴歸一鍵更改默認瀏覽器

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

闫园园 2021-12-07 11:58:59

使用HTML+CSS製作逼真的紅色開關

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

海拥(haiyong.site) 2021-12-04 14:03:52

JetBrains 發佈輕量級編輯器 Fleet

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

辛晓亮 2021-11-30 14:53:56

HTTP客戶端演進之路

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

尼先 2021-11-24 17:43:59

TypeScript 4.5 發佈，帶來 Promise 功能改進

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

辛晓亮 2021-11-19 11:23:57

手把手帶你玩轉 JS | 引航計劃｜大前端

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragr

三掌柜 2021-11-18 09:28:56

Flutter性能監控實踐

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"前言","attrs

贝壳大前端技术团队 2021-11-13 13:33:50

花7.5億都做不好的項目，被三位程序員爸爸重寫並開源了

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockq

Tina 2021-11-11 09:23:48

ShowMeBug 中如何科學的識別用戶瀏覽器？

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

ShowMeBug 2021-11-10 17:33:55

架構師（2021年11月）

卷首語：二十年老程序員的五條心得 作者：Justin Etheredge 1. 我懂的並不多 “你怎麼會不知道什麼是 BGP？”“你難道沒聽說過 Rust？” 類似的問題可能每天都會出現在我們面前。沒錯，投身於軟件行業的很多人之所以熱愛這份

InfoQ 中文站 2021-11-08 08:03:53

託管頁前端異常監控與治理實戰

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null

百度Geek说 2021-11-05 15:03:57

網易雲信陳功：體驗共享和無限融合是雲通信未來的進化方向丨QCon

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

张俊宝 2021-11-03 19:03:56

微軟產品經理：你不能不知道的6個Web開發者工具

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragr

Christian Heilmann 2021-11-03 16:08:56

貝殼Flutter瘦身實踐

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"背景","attrs

贝壳大前端技术团队 2021-11-03 10:33:58