Loading...

CSSobject-fit 屬性用於指定應如何調整 img或video的大小以適合其容器

Temperature: 0 °C

Mark ChangMark Chang
author_tools

在UI排版時常會遇到一個問題,後台上傳的圖片比例無法符合前台顯示的DIV容器。
以前我比較常用的方式是使用PHP GD裁切。

GD的好處是你可以調整你想要顯示的位置在設定的範圍內。

但其實若只是要讓圖片或video顯示在前台DIV容器裡,也可以使用CSS object-fit 屬性。

該屬性告訴內容以多種方式填充容器;例如「保持縱橫比」或「伸展」。

使用方式也很簡單,只要在原本的CSS底下加入object-fit屬性就可以,以圖片為例:
object-fit:cover
圖像保持其縱橫比並填充給定的尺寸,圖像將被裁剪以適合容器。

img {
width: 360px;
height: 640px;
object-fit: cover;
}

object-fit: contain
圖像保持其縱橫比,但調整大小以適應給定的尺寸。
img {
width: 360px;
height: 640px;
object-fit: contain;
}

object-fit: fill
圖像調整大小以填充給定的尺寸。如有必要,圖像將被拉伸或壓扁以適合容器。
img {
width: 360px;
height: 640px;
object-fit: fill;
}

以上紀錄
參考網站w3schools.com

#故事  #CSS  #objectfit  
https://innstory.com/story-CSSobjectfit_屬性用於指定應如何調整_img或video的大小以適合其容器-2820
CSS

Prev
 分享_不得不用的15個神奇熱鍵

Next
線上CSS壓縮工具CSS_Compressor 

About the Author

Mark Chang

離不開電腦的宅男

Visitor message

Leave some footprints to prove that you visited me

Recommended reading

Author's other related stories

使用CSS讓整個網頁由彩色變黑白色!

使用CSS讓整個網頁由彩色變...

blackandwhite5 把下面的語法加入網頁的<head>與</head&g...

ubuntu 18.04  apache 目錄啟用並開啟.htaccess 覆寫

ubuntu 18.04 ...

.htaccess是在Apache HTTP Server這款服務器架設軟件下的一個對於系統目錄進行...

直接在PHP重新命名帶有前綴的session.name

直接在PHP重新命名帶有前綴...

直接在php檔案裡加入以下指令 sessionname(&#;SecurePHPSESSID&#;)...

Please select an option

error

Hi, thank you for your participation, but you cannot vote repeatedly~

Join innstory now and start recording your story.

"Innstory" is a place to store stories. We are committed to becoming a warm platform. Deepening the bonds between people is our direction.
We are convinced that the blockchain between people is not just a cold calculation. Join us now.

Wrong format