Div with height equal to background-image

Question

I’m with a div and in it there’s a background-image of height variant, I wish that div had exactly the same height of this image, so that it does not get cropped.

It’s something like that:

<div style="background-image: url(..); height:100%;"></div>

The image may have height > 1000 the div is 0 of height, how to solve?

Answer 1

The only way is if the Aspect-ratio of all images is the same, then you can do this:

.fundo {
  width: 100%;
  display: inline-block;
  position: relative;
  background-size: contain;
  background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat;
  margin: 0 auto;
}
.fundo:after {
  padding-top: 75%;
  /* essa lhama tem tamanho 800x600 então setamos um padding-top % equivalente a 600/800, ou .75, ele cria um height usando o padding para a div n colapsar */
  display: block;
  content: '';
}
.conteudo {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  color: black;
  text-align: center;
  margin-top: 5%;
}

<div class="fundo">
  <div class="conteudo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut rhoncus mauris. Sed a lorem vehicula, mattis massa ac, faucibus tortor. Pellentesque lobortis blandit ligula ut bibendum. Curabitur diam dolor, lacinia sit amet arcu sit amet, porta accumsan eros. Pellentesque dictum sed quam id aliquam. Donec a ultricies purus. Aenean vel eros congue, maximus justo non, mollis elit. Phasellus lobortis nunc at velit volutpat, vel sagittis est lobortis. Quisque id velit facilisis, dignissim sapien at, iaculis odio. Morbi in felis nec lorem luctus tincidunt. Fusce ornare sapien odio, a consequat dolor bibendum eget.
  </div>
</div>

If the images are of different sizes you will need to read the image size after rendering (in the browser), and adjust the height using Javascript or Jquery for example. It is also possible to do this in the back end, before sending the data to the user (via PHP or JSP for example).

If you can change the structure of HTML, it is much better to use the image tag for this, because it has just this function (image as a block):

div {
    position: relative;
}
div img {
    position: relative;
    width: 100%;
}

div div {
    position: absolute;
    top:0;
    left:0;
}

<div>
 <img src="https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg" />
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut rhoncus mauris. Sed a lorem vehicula, mattis massa ac, faucibus tortor. Pellentesque lobortis blandit ligula ut bibendum. Curabitur diam dolor, lacinia sit amet arcu sit amet, porta accumsan eros. Pellentesque dictum sed quam id aliquam. Donec a ultricies purus. Aenean vel eros congue, maximus justo non, mollis elit. Phasellus lobortis nunc at velit volutpat, vel sagittis est lobortis. Quisque id velit facilisis, dignissim sapien at, iaculis odio. Morbi in felis nec lorem luctus tincidunt. Fusce ornare sapien odio, a consequat dolor bibendum eget.</div>
</div>