項(xiàng)目中圖片用的Img標(biāo)簽src引入圖片,但是要圖片全部再固定寬高中,前面只知道用背景圖可以設(shè)置background-size設(shè)置,img不會(huì)枉证,后面研究之后終于解決了;
一:background-size: contain 與cover的區(qū)別:
作用: 都是將圖片以相同寬高比縮放以適應(yīng)整個(gè)容器的寬高移必。
不同之處在于:
在no-repeat情況下室谚,如果容器寬高比與圖片寬高比不同,
cover:圖片寬高比不變、鋪滿(mǎn)整個(gè)容器的寬高舞萄,而圖片多出的部分則會(huì)被截掉眨补;
contain:圖片自身的寬高比不變管削,縮放至圖片自身能完全顯示出來(lái)倒脓,所以容器會(huì)有留白區(qū)域;
PS:其實(shí)含思,從英文的意思來(lái)說(shuō):cover意味著“遮罩崎弃、遮蓋”---此處理解為“塞滿(mǎn)”較恰當(dāng),contain意為“包含”--也就是:我圖片雖然縮放了含潘,但是整個(gè)圖是被“包含”在你里面的饲做,你必須把我顯示完整、不能裁剪我一絲一毫~在repeat情況下:cover:與上述相同遏弱;contain:容器內(nèi)至少有一張完整的圖盆均,容器留白區(qū)域則平鋪背景圖,鋪不下的再裁掉漱逸。
二:如果是img便簽
object-fit: contain; // contain與cover與background-size一樣的用法