我正在嘗試創建一個網站，其中背景影像將居中，并且它將根據 Web 瀏覽器視窗調整自身大小，但僅直到達到其原始大小。之后它將停止變大并保持居中。有沒有辦法使用 CSS 做到這一點？我畫了一些例子來更好地解釋自己。這里, 網站的寬度大于實際影像的寬度，因此影像達到其最大寬度并保持在那里。但是，顯示的影像的高度高于或等于視窗的高度，因此它是從上到下的。此外，如果網站的寬度大于圖片的寬度，但高度不是，我不想只看到圖片的一部分，我希望它自動調整大小以適應螢屏 - 某事像縮放。并且這里顯示如果站點的高度和寬度大于實際圖片的寬度和高度，它只是保持居中。我有一些代碼，但我無法讓它作業，因為我對 CSS 還很陌生。代碼：
body{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
uj5u.com熱心網友回復：
您可以使用max-width并max-height制作它，使其不會變得比您選擇的更大。
uj5u.com熱心網友回復：
就像我在 Windows 11 Clone 網站上所做的一樣 :) https://codepen.io/laaouatni/pen/ZEXOpXw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<style>
body {
height: 100vh;
width: 100vw;
background-image: url(https://laaouatni.github.io/w11-clone/images/1dark.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
</style>
</html>
uj5u.com熱心網友回復：
如果您沒有為影像指定任何尺寸，那么它將以其自然尺寸顯示。
但是，您可以告訴系統不允許寬度或高度超出視窗大小。
這是一個片段，用 3 張影像來演示這一點，一張很寬，一張很小，一張很高：
body {
width: 100vw;
height: 100vh;
}
img {
max-width: 100vw;
max-height: 100vh;
}<img src="https://picsum.photos/id/1015/2000/300" />
<img src="https://picsum.photos/id/1015/200/200" />
<img src="https://picsum.photos/id/1015/300/2000" />轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/387181.html