在CSS中使用參數或現有的變量

我將CSS添加到了一個複選框，它工作得很好。我使用本地文件（名爲check.png）作爲檢查背景圖像並在複選框區域內裁剪。在CSS中使用參數或現有的變量

這裏有兩個複選框一個檢查和一個未經檢查

enter link description here

現在，我想知道這是否是可能的，而不是在CSS文件中手動設置25像素，獲得背景圖像真實寬度和高度，並將寬度設置爲background.width並將高度設置爲background.height/2。

這將使有如果我改變check.png，仍然正常工作

編輯自動調整大小：我覺得我被誤解了。我希望盒子適合背景圖像，而不是適合盒子的圖像。我會嘗試相反的

編輯2：好的Nvm顯然適合框中的背景是一個比裝配圖像中的盒子更好的主意。謝謝：D

2017-05-09 Skymen

'背景大小'可能是你在找什麼。如果你想以某種方式放置圖像，還可以查看「背景位置」。 – Sagar

你不必寫確切的width和height。要縮放背景圖像以適合其容器裏面，你可以簡單地使用：

background-size:contain;

2017-05-09 10:16:14

'背景大小：包含;'這隻適用於高度或寬度不爲這兩個 – Durga

設置

background-size: 100% 100%; 
background-repeat: no-repeat;

2017-05-09 10:17:19 Durga

使用此javascript來獲取圖像的寬度和高度：

var img = new Image(); 
img.onload = function() { 
    alert(this.width + 'x' + this.height); 
} 
img.src = 'https://i.stack.imgur.com/4TObz.png';

2017-05-09 10:17:57 Mokkun

是否有辦法獨家使用CSS？無論如何，謝謝 – Skymen

如果您需要容器來動態適應圖像大小，恐怕您必須使用javascript – Mokkun

我看到謝謝。那麼反過來（圖像適合在容器）工作，因爲我也想，謝謝：D – Skymen

@杜爾加的答案符合你的需求。

但是，讓資源文件來決定您的DOM組件大小似乎不是最好的做法，做相反的方式（使用CSS自動適合您的容器，因爲@ Koby建議）通常是首選。

2017-05-09 10:22:32 XRay

是的，我意識到這一點，謝謝 – Skymen

回答