資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 CSS 調整 ![]()
或
向網站新增影像的目的是提高其視覺吸引力和使用者吸引力。但是，如果我們無法控制網站上影像的大小，它們就不會那麼吸引人了。幸運的是，CSS 使更改影像大小變得非常簡單。
可以使用多種方法更改 CSS 影像大小。首先，讓我們檢查一下為什麼在 CSS 中更改影像大小很重要。如果沒有對影像大小的限制，影像將填充其大小的每個畫素。但是，每個影像都應該與其放置的容器大小相符。這在構建響應式網站時尤其重要。
CSS object-fit 屬性
可以使用 **CSS object-fit 屬性** 將影像或影片縮放以適應其內容框。此屬性指定如何以多種方式填充內容框或容器中的內容，例如保持縱橫比或透過擴充套件和提升儘可能多地填充空間等。object-position 屬性允許您修改替換元素的內容物件在其元素框內的對齊位置。
語法
以下是 object-fit 屬性的語法：
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
示例
讓我們來看下面的示例，我們將使用帶有 fill 值的 CSS object-fit 屬性。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
color: #DE3163;
background-color: #D5F5E3;
text-align: center;
}
#tp {
width: 400px;
height: 200px;
object-fit: fill;
}
</style>
</head>
<body>
<h2>CSS object-fit property with fill value</h2>
<img id="tp" src="https://tutorialspoint.tw/cg/images/logo.png">
</body>
</html>
執行以上程式碼後，它將生成一個包含影像和網頁上顯示的文字的輸出。
示例
考慮另一種情況，我們將使用帶有 contain 值的 CSS object-fit 屬性。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
font-size: 15px;
color: #DE3163;
background-color: #F4ECF7;
text-align: center;
}
#tp {
width: 500px;
height: 450px;
object-fit: contain;
}
</style>
</head>
<body>
<h2>CSS object-fit property with contain value</h2>
<img id="tp" src="https://tutorialspoint.tw/cg/images/logo.png">
</body>
</html>
執行以上程式碼後，輸出視窗將彈出，在網頁上顯示影像和文字。
示例
在下面的示例中，我們將使用帶有 cover 值的 CSS object-fit 屬性。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
color: #DE3163;
background-color: #D6EAF8;
text-align: center;
}
#tp {
width: 300px;
height: 200px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>CSS object-fit property with cover value</h2>
<br>
<br>
<br>
<img id="tp" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Dhoni_behind_Stumps.jpg/330px-Dhoni_behind_Stumps.jpg">
</body>
</html>
執行以上程式碼後，它將生成一個包含影像和網頁上顯示的文字的輸出。
更新於：2024年1月8日
169 次瀏覽
