max-size
max-width屬性意味着圖片會隨着包含它的容器縮小而縮小,但在容器變大時,它不會大到超過自身的固有尺寸
注意:父元素不要設置高度
img{
max-width:100%;
width:auto;
height:auto;
}
有時候某些設計者或內容管系統會在HTML源代碼中給圖片天機awidth和height屬性,這里把width和height設置為auto,某種程度上可以覆蓋之前的聲明,同時也可以解決IE8在不聲明width時無法正確縮放圖片的問題
object-fit
根據顯示容器的大小來設置img或其他嵌入對象(video或object元素)的大小,比如說有一個矩形圖片,我們希望通過CSS將其設置為正方形
contain與cover與background-size中對應的關鍵字作用相同
none會采用圖片固有大小,不管容器多大
scale-down會自動從none和contain中選一個,哪個結果尺寸小就用哪個
fill為默認值
最終的圖片會居中,但可以用object-position重新設置
此屬性只有Chrome、Opera和Firefox的新版本才支持,Safari暫不支持object-position。IE和Edge還不支持,Edge不就可能會支持