項目中圖片用的Img標簽src引入圖片,但是要圖片全部再固定寬高中,前面只知道用背景圖可以設置background-size設置,img不會,后面研究之后終于解決了;
一:background-size: contain 與cover的區別:
作用: 都是將圖片以相同寬高比縮放以適應整個容器的寬高。
不同之處在于:
在no-repeat情況下,如果容器寬高比與圖片寬高比不同,
cover:圖片寬高比不變、鋪滿整個容器的寬高,而圖片多出的部分則會被截掉;
contain:圖片自身的寬高比不變,縮放至圖片自身能完全顯示出來,所以容器會有留白區域;
PS:其實,從英文的意思來說:cover意味著“遮罩、遮蓋”---此處理解為“塞滿”較恰當,contain意為“包含”--也就是:我圖片雖然縮放了,但是整個圖是被“包含”在你里面的,你必須把我顯示完整、不能裁剪我一絲一毫~在repeat情況下:cover:與上述相同;contain:容器內至少有一張完整的圖,容器留白區域則平鋪背景圖,鋪不下的再裁掉。
二:如果是img便簽
object-fit: contain; // contain與cover與background-size一樣的用法