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

讓文字左右對齊

讓文字左右對齊

讓文字左右對齊這類的設計案,通常都會出現在平面設計居多。 網頁上很少會遇到客戶會執著於這方面,但不能...

想在網頁上預覽PDF可使用的方案

想在網頁上預覽PDF可使用的...

使用pdfobject.js #設定顯示位置 <div id="pdf"></d...

如何將mysql table auto_increment重設

如何將mysql table...

photo555 資料表裡的資料加加減減,一不小心突然驚覺當初的欄位長度設定的不夠⊙⊙ 當然,你可以...

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