資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律學如何在 div 內居中背景圖片？
在建立網頁時，一種常見的頁面設計做法是在 div 中居中背景圖片。有幾種可用的方法，每種方法在其領域都很有用。無論螢幕大小或 div 的大小如何，文章中的 div 盒子內都會居中背景圖片。每當視窗大小調整時，背景中的圖片都應保持在正中央。
在 div 內居中背景圖片
以下是一些在 div 內居中背景圖片的最有效方法。
使用 CSS 背景位置
最簡單的方法是使用background-position 屬性。這非常適合將圖片用作背景圖片的情況。
示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>Center a Background Image Inside a div</title>
<style>
.background-center-1 {
width: 300px;
height: 200px;
border: 2px solid black;
text-align: center;
background-color: green;
background-image: url(
'https://tutorialspoint.tw/assets/questions/media/1039321-1731475345.jpg');
background-position: center;
background-repeat: no-repeat;
font-size: larger;
}
</style>
</head>
<body>
<div class="background-center-1">This is the div</div>
</body>
</html>
輸出
使用 Flexbox 和圖片元素
要使用flexbox 在 div 中居中圖片元素，請使用在 div 中直接居中圖片可以作為預期的子節點（例如，出於嚴格的可訪問性目的或 SEO）。
示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>Center a Background Image Inside a div</title>
<style>
.flex-center {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
overflow: hidden;
background-color: green;
border: 2px solid black;
}
.centered-img {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div class="flex-center">
<img src=
"https://tutorialspoint.tw/assets/questions/media/1039321-1731475345.jpg"
alt="Centered Image"
class="centered-img">
</div>
</body>
</html>
輸出
使用 Grid 和圖片元素
也可以使用 CSS Grid 在 div 內居中圖片。
示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>Center a Background Image Inside a div</title>
<style>
.flex-center {
display: grid;
place-items: center;
width: 300px;
height: 200px;
overflow: hidden;
background-color: green;
border: 2px solid black;
}
.centered-img {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div class="flex-center">
<img src=
"https://tutorialspoint.tw/assets/questions/media/1039321-1731475345.jpg"
alt="Centered Image"
class="centered-img">
</div>
</body>
</html>
輸出
使用 CSS 定位和絕對居中
因此，為了居中圖片，您可以透過將頂部和左側對話方塊設定為 div 寬度的 50% 來絕對居中，然後應用變換以精確設定中心。
示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>Center a Background Image Inside a div</title>
<style>
.position-center {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
background-color: green;
border: 2px solid black;
}
.positioned-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div class="position-center">
<img src=
"https://tutorialspoint.tw/assets/questions/media/1039321-1731475345.jpg"
alt="Centered Image"
class="positioned-img">
</div>
</body>
</html>
輸出
對包含的圖片使用 Object-Fit
如果希望圖片理想地適合 div 的範圍，請使用 object-fit: contain; 以避免容器中圖片元素被裁剪。
示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>Center a Background Image Inside a div</title>
<style>
.object-fit-center {
width: 300px;
height: 200px;
overflow: hidden;
background-color: green;
border: 2px solid black;
}
.object-img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<div class="object-fit-center">
<img src=
"https://tutorialspoint.tw/assets/questions/media/1039321-1731475345.jpg"
alt="Centered Image"
class="object-img">
</div>
</body>
</html>
輸出
更新於: 2024年11月13日
13 次檢視
廣告