CSS如何設置圖像而不設置寬度和高度

Question

我的問題：

我有類.logo這種規模perfecly工作：width: 316px; height: 300px;

的問題是這樣的標誌永遠不會總是有這種規模，寬度和高度不應該被定義，所以下一個標識可以很好地吻合。

我試圖刪除寬度和高度沒有成功，當我這樣做的標誌不出現。

這是我可以在CSS中做的事情，使這項工作沒有設置寬度和高度？

https://jsfiddle.net/pLfgam3r/1/

.logo { 
 
    background-image: url('https://lh5.ggpht.com/tq3WqEUxtRyBn-d_0t3j6WKNHuJDrmLq-FE3GAYrsAMQFIaS7FIgRLfzzql2SvfvLqto=w300-rw'); 
 
    background-repeat: no-repeat; 
 
    width: 316px; 
 
    height: 300px; 
 
    display: inline-block; 
 
    margin-top: 20px; 
 
    margin-left: 20px; 
 
} 
 

 
.logo2 { 
 
    background-image: url('https://i.ytimg.com/vi/SfBR9aGrk9k/maxresdefault.jpg'); 
 
    background-repeat: no-repeat; 
 
    width: 316px; 
 
    height: 300px; 
 
    display: inline-block; 
 
    margin-top: 20px; 
 
    margin-left: 20px; 
 
}

<div class="logo"></div> 
 
<div class="logo2"></div>

Answer 1

設置background-size: contain;

https://jsfiddle.net/wuqvwpkL/1/

Answer 2

我發現這個職位： Why doesn't the background image show up without specific width and height?

所以你的CSS應該是這樣的：

.logo2 { 
    background-image: url('https://i.ytimg.com/vi/SfBR9aGrk9k/maxresdefault.jpg'); 
    no-repeat: true; 
display: block; 
    position: relative; 
    width: 316px; 
    height: 300px; 
    padding-bottom: 20%; 
    background-size: 100%; 
    background-repeat: no-repeat 
} 

這工作有不同的大小兩個徽標。

https://jsfiddle.net/pLfgam3r/4/

Answer 3

您使用圖像作爲背景圖像，我會說設置background-size:cover;