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;