插入一個標誌與CSS

Question

我有以下的HTML

<a class=logo></a>

我想和我的標誌來代替它。但我想標誌佔用垂直房100％，水平房的量，這將會使比例

的圖像，我可以嘗試做

.logo { 
    background-image: 'logo.svg'; 
    background-size: auto 100%; 
} 

除了我還需要設置一個height和width爲了佔用空間。

我可以嘗試做

.logo:before { 
    content: url('logo.svg'); 
} 

除了設置圖像的高度和寬度的唯一方法是使用

zoom: X% 

或

transform: scale(50%); 

，並沒有這些將對變化的高度做出反應

有沒有其他方式我錯過了？

編輯：fiddle - 我怎樣才能在這裏得到正確的寬度？

Answer 1

如果您想要一個寬度爲100％，高度與背景圖像寬高比匹配的比例框，請將垂直填充設置爲與垂直比例相匹配的百分比。

即，如果您的徽標是2：1矩形，請將寬度設置爲100％，填充爲25% 0，並且您的代碼將保持按比例調整大小（您需要將其設置爲display: block;）。然後background-size: 100% auto（或其他方式）應該工作，因爲背景圖像的寬高比與其容器相同。

fiddle