資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何設定等同於 background-size 屬性“cover”值的 img 標籤效果？
在網頁設計中建立響應式影像時，一個常見的要求是使影像填充整個容器同時保持其縱橫比。傳統上，`background-size: cover;` CSS 屬性用於背景影像以實現此效果。但是，對於內聯影像（使用`<img>`標籤），可以使用 `object-fit` 屬性採用不同的方法。本文將引導您在``標籤上設定此等效效果，並比較使用`
`元素和背景影像。
方法
使用帶有標籤的 object-fit: cover
`object-fit` CSS 屬性用於控制內容如何填充容器。在``標籤上使用`object-fit: cover;`可以實現與背景影像的`background-size: cover`相同的效果，確保影像填充容器並保持其縱橫比。
示例程式碼
在以下示例中，我們設定影像以佔據全視口寬度和高度。我們使用 `object-fit: cover` 來確保影像填充整個容器同時保持其縱橫比。
<!DOCTYPE html>
<html>
<head>
<title>Using object-fit for Cover Effect</title>
<style>
body {
margin: 0;
}
img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}
</style>
</head>
<body>
<img src=
"https://tutorialspoint.tw/static/images/hero.png"
alt="Cover Image Example" />
</body>
</html>
輸出
使用背景影像作為替代方案
在某些情況下，您可能更傾向於使用背景影像而不是內聯``標籤。當影像純粹是裝飾性的或不需要作為文件內容結構的一部分時，這很常見。以下是如何使用`背景影像`和`background-size: cover;`實現類似效果。
示例程式碼
在此示例中，我們使用``元素作為佔位符，但在 CSS 中將實際影像設定為背景影像。我們還使用填充來控制影像容器的大小。
<!DOCTYPE html>
<html>
<head>
<title>Background-size Cover Example</title>
<style>
body {
margin: 0;
}
.background-img {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url(
'https://tutorialspoint.tw/static/images/hero.png') no-repeat center center;
background-size: cover;
}
</style>
</head>
<body>
<div class="background-img"></div>
</body>
</html>
輸出
更新於：2024年11月8日
20 次檢視
廣告