我要成為切版魔法師#2

CSS object-position 為網頁設計提供了靈活而強大的工具，可以精確控制多媒體物件的顯示位置。適當應用可以提升網站的整體視覺效果，改善用戶體驗。

object-fit 選項 · fill：預設效果，元素會被拉伸填滿外層容器，長寬比會被扭曲 · contain：元素的長寬比不變，最大邊會填滿容器 · cover：元素的長寬比不變， ...

如果是內文的一部分就用 <img>. 可以插入圖片的標籤是 <img> ，但其實透過CSS 的另一個屬性 background-image 也可以插入圖片，這邊先來探討 <img> 標籤除 display: block 之 ...

inline-block，不會和其他元素產生上下推擠，又可以設定寬高。值得注意的是，img 標籤是預設display: inline-block，而非與div 相同是block 喔！ 前面我們 ...

基本上在網站新增圖片時還是會先建議用HTML的 ，除非是要設定一個section的背景圖片再用CSS的background-image。而且新增HTML的 後，可以再去CSS設定圖片 ...

擺放背景圖片 · background-size: unset; 圖片以原尺寸擺放，靠左上方對齊 · background-size: contain; 圖片以原尺寸縮放至外框大小，靠左方對齊，右方留白 ...

CSS 除了可以設定背景顏色，還可以設定「背景圖片」，這篇教學會介紹CSS 設定背景圖片的樣式屬性：background-image、background-position、background-size、background- ...

放圖片有兩種方式. HTML <img> 這個tag; CSS 的 background-image. 當圖片要有超連結，或是有點圖放大的功能時，建議先用HTML的 <img> ...

通常會將網頁中有意義的圖片使用img 標籤表示，因為這時才有語意化的含義，而裝飾元素就會使用CSS 語法 background-image 放入網頁中。 background-image ...

在網頁設計上，有時我們只要擷取圖片的一部分時，若是還要另外切圖片的話又會顯得累贅，這時我們可以用CSS的屬性來自由裁切圖片囉！ ... 設定成overflow: hidden就可以將多餘的 ...