根據

W3C Specs：

A percentage is relative to the background positioning area.

和background positioning area是基于background-origin屬性的border-box或padding-box或content-box之一.這里沒有為此明確指定任何值,因此使用其默認值padding-box.此元素沒有填充,因此它等于content-box.

您的圖像為126 x 112像素,但元素的寬度和高度為56 x 56像素,因此背景大小：100％(推斷為100％自動)意味著圖像按比例縮小,直到寬度為56像素.現在要達到56px,寬度縮小了圖像原始大小的44.44％.因此,為了保持縱橫比(作為一個值為自動),圖像的高度也縮小到44.44％,即49.78px(或大約50px).正如您所看到的,計算出的背景圖像的尺寸為56px x 50px(而不是56px x 56px),因此它不會完全覆蓋該框.您可以在下面的代碼段中清楚地看到這一點.

.test {

background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;

width: 56px;

height: 56px;

border: 1px solid red;

background-size: 56px 50px; /* see how this is same as 100% or 100% auto */

}

.test.t2 {

width: 56px;

height: 56px;

background-size: 100%;

}

.test.t3 {

width: 56px;

height: 56px;

background-size: 100% auto;

}

注意：56px寬度包括圓圈右側的白色空間,因此即使它覆蓋了元素的整個寬度,您仍然會看到間隙.這是由于圖像本身具有空間.

現在,當你設置背景大小：50％(= 50％自動)時,它意味著圖像的最大寬度可以是28px,因此它縮小了22.22％.這意味著高度也縮小了22.22％,大約是25px.這就是為什么你認為它幾乎是四分之一大小(但不完全是四分之一).這可以在下面的片段中直觀地看到：

.test {

background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;

width: 56px;

height: 56px;

border: 1px solid red;

background-size: 28px 25px; /* again see how they are same */

}

.test.t2 {

width: 56px;

height: 56px;

background-size: 50%;

}

.test.t3 {

width: 56px;

height: 56px;

background-size: 50% auto;

}

當我們設置背景大小：113％時,這意味著寬度可以是容器寬度的最大值的113％,即63.28px,這大約是原始圖像寬度的50％.由于寬度從原始圖像縮小了50％,因此其高度也按比例縮小,因此得到的值為56px(這只是元素的高度,因此它垂直覆蓋了框).現在,由于您還將背景位置設置為左上角,因此圖像相對于容器的左邊緣放置,因此位于圖像右側的白色空間(另一個是7.28) px)是不可見的,因為框不會顯示任何超過其寬度的內容.

你已經回答了問題的第二部分,所以我不會再討論它了.

對于未來的讀者：對于OP的情況,可能無法擺脫白空間,因為它是精靈的一部分,但如果你的情況不同,你可以擺脫空間,那么這是最好的.

如果右側的白色空間被移除并且圖像被裁剪為其實際尺寸(即112 x 112px),那么僅設置背景尺寸：100％100％(甚至100％自動)就足夠了.當設置為原始尺寸的一半或四分之一(或任何)尺寸時,容器元素的尺寸將自動為我們進行縮放.

.test {

background: url(https://i.stack.imgur.com/UaCct.png) left top no-repeat;

width: 112px;

height: 112px;

background-size: 100% 100%;

border: 1px solid red;

}

.test.half-size {

width: 56px;

height: 56px;

}

.test.quarter-size {

width: 28px;

height: 28px;

}

總結

以上是生活随笔為你收集整理的html背景图片尺寸位置百分比,css – 如何计算背景大小百分比？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。