CSS(層疊樣式表)不僅可以為網頁添加樣式,還可以控制圖片的縮放形式。
在網頁中,圖片是一個重要的元素,通過CSS設置圖片的縮放形式可以使網頁更加美觀和合理。
img { max-width: 100%; height: auto; }
這段CSS代碼可以使圖片自適應網頁大小,并保持原始比例。其中max-width設置圖片的最大寬度,為父元素的100%;height:auto表示圖片高度自適應。
img{ width:200px; height:100px; object-fit: cover; }
這段CSS代碼可以控制圖片的大小,并使圖片填充其所在的容器。其中width和height設定圖片大小;object-fit:cover表示填充容器。
img{ width:200px; height:100px; object-fit: contain; }
這段CSS代碼可以控制圖片的大小,并使圖片完整展示在其所在的容器中。其中width和height設定圖片大小;object-fit:contain表示完整展示圖片。
以上是關于CSS設置圖片縮放形式的兩種常用方法,可以根據需要選用。
上一篇php cut函數
下一篇php cutycapt