CSS(五)- 漂亮的盒子 - 為嵌入圖片和元素添加樣式


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不就可能會支持


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM