CSS how to set a image without set width and height

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>

you are using image as background-image, so obviously you need a container to set background. for that container you are suppose to set width and height when there is no content! — RaJesh RiJo, Oct 10 '17 at 10:48
Your code is setting the height and width of the div, not the size of the image. — Calaris, Oct 10 '17 at 10:49
Possible duplicate of [Why doesn't the background image show up without specific width and height?](https://stackoverflow.com/questions/32175195/why-doesnt-the-background-image-show-up-without-specific-width-and-height) — Rob, Oct 10 '17 at 11:04

score 0 · Answer 1 · answered Oct 10 '17 at 10:48

0

Set background-size: contain;

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

answered Oct 10 '17 at 10:48

Bastien Robert

809
1
10
31

score 0 · Answer 2 · answered Oct 10 '17 at 10:57

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/

CSS how to set a image without set width and height

2 Answers2