CSS how to set a image without set width and height - html

Question

my problem :
I have the class .logo working perfecly with this size: width: 316px; height: 300px;
the problem is this logo never will have this size always, the width and height should not be defined, so next logo can fits well.
I tried remove the width and height without no success, when I do this the logo does not appear.
it is something I can do in the css to make this work without set width and height?
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

Set background-size: contain;
https://jsfiddle.net/wuqvwpkL/1/

Answer 2

I found this post:
Why doesn't the background image show up without specific width and height?
So your css should look like this:
.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
}
This is working for both logos that has different sizes.
https://jsfiddle.net/pLfgam3r/4/