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

WordPress如何關閉迴響留言功能?

WordPress如何關閉迴...

其實WordPress本身的留言迴響功能還蠻健全的。 包括可以設定關鍵字黑名單或者是IP黑名單,強制...

如何增加WordPress網站的PHP時間限制?

如何增加WordPress網...

PHP時間限制是您的網站在超時之前將花費在單個操作上的時間。當操作達到設置的時間限制時,它將返回錯誤...

php定時執行任務ignore_user_abort() 函式

php定時執行任務ignor...

ignoreuserabort() 函式 PHP , PHP 5, PHP 最近剛好有一個專案需要定...

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