在進行布局的時候,很多PM都要求圖片等比例縮放,而且要求圖片不失真,不變形,但是UI設計好了這個div的寬度又不能隨意更改,而后台傳過來的圖片也不是等比例的圖片,這就比較難受了,寫成 width: 100%;和height: 100%; 如果圖片剛好和你設定的div等比例,那自然是沒有問題的,但往往不是這樣的.
寫出來的效果也許就是這樣的
這時UI一看,這是什么玩意啊,怎么把我的圖片壓縮了.
那么css就提供了一個屬性,可以達到我們想要的效果,只需要給圖片加上
object-fit: cover;
來看看效果
同樣是一張圖片,還是同樣的大小,但是加上object-fit: cover; 之后就變了,就是這么神奇.
這個屬性還有別的值
object-fit: fill;
object-fit: contain;
object-fit: scale-down;
可以自己去試一下,看看效果.