我從 MDN 參考了background-sizebody { width: 800px; height: 800px; } ，但不明白為什么下面的代碼片段在 CSS被注釋掉時不顯示 iPhone 影像（當給出明確的寬度/高度值時，它按預期作業）。body { width: 100%; height: 100%; }應用或應用時，影像均不顯示body { width: auto; height: auto; }。
我希望 iPhone 影像在沒有任何裁剪的情況下盡可能大地顯示，我認為這與關于background-size: contain. 我假設它與 的寬度和高度有關body，但我想完全了解發生了什么。
body {
background-image: url("https://raw.githubusercontent.com/htcrefactor/momentum/main/images/apple-iphone-12-pro-max.webp");
background-size: contain;
background-repeat: no-repeat;
background-color: black;
width: 800px;
height: 800px;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./src/styles.css" />
<title>Reminders</title>
</head>
<body>
</body>
</html>uj5u.com熱心網友回復：
所以，這就是發生的事情
如果您按百分比設定元素的高度，CSS 將查找元素的父親以使用他的高度并計算元素的高度
如果父親有一個特定的高度，它會計算并得到高度但是如果父親的高度設定為自動（這是幾乎所有html元素的默認值）CSS無法計算高度！
假設您將身體的高度設定為 50%，因此 CSS 應該將身體的父親（html）高度乘以 50，然后將結果除以 100，為什么它不能完成這項任務？b'Coz : 自動 * 50 / 100 = ???
但是如果父級（在您的情況下為 html）具有特定的高度（假設為 400px），CSS 可以輕松計算出：
400 * 50 / 100 = 200 像素
這就是為什么既不height:auto像你想要的那樣作業，也不像你想要的那樣作業的原因height:100%
因為在這兩種情況下，您的身體高度都設定為自動，而自動意味著您的孩子需要盡可能多的尺寸（您的身體是空的，對嗎？所以高度將為 0）
但是當你說它height:800px會簡單地不管身體的孩子的身高
現在，如果您希望您的身體獲得完全相同大小的用戶視口，您可以使用vh和vwCSS 單位
首先，查看https://caniuse.com以查看您的目標設備是否支持這些設備
那么你可以說
body{
width: 100vw;
height: 100vh;
}
這將表示您的 body 元素應該具有所有 100% 的視口寬度 (vw) 和視口高度 (vh)
注意：
background-size: contain;
將根據需要放大或縮小您的影像，以確保您的所有影像在父級中可見（同時保持縱橫比）
所以有可能你的身體元素的某些地方最終變成白色并且沒有得到背景（如果你的影像的縱橫比與身體的縱橫比不同）
如果你希望你的所有身體 html 都被你的影像覆寫，你應該使用
background-size:cover
而不是contain
這樣可以裁剪您提到的影像...
因此，如果您的影像的縱橫比比影像的完整性更重要，您需要做出選擇，否則封面是解決方案（完整性比縱橫比更重要）如果完整性和縱橫比都可以使用 100% 作為背景大小- 比率很重要，身體的某些部分加載為白色并且沒有背景影像是可以的，您已經通過使用做出了最佳選擇contain
uj5u.com熱心網友回復：
我認為影像在扭曲時消失，嘗試添加 1 個固定值和 1 個最大值并更改為背景而不是背景影像，我之前遇到過這個錯誤
body {
background: url("https://raw.githubusercontent.com/htcrefactor/momentum/main/images/apple-iphone-12-pro-max.webp");
background-size: contain;
background-color: black;
height: 800px;
max-width: 800px
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/462401.html
下一篇：Flexbox顯示為列，而不是行