Div with height equal to background-image

Question

Div with height equal to background-image

Navigation

#1 by (0 votes)

0

I have a div and there is a% w of% of% with% variant, I would like this div to have exactly the same% w / o of this image so it does not get cut.

It's something like this:

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

The image can have background-image > 1000 that the div is 0 of height , how to solve?

css

asked by anonymous 13.03.2016 / 13:08

1 answer

Problem with image size and position: fixed Create JAR with an included txt

score 0 · 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 size of the image after rendering (in the browser), and adjust the height using Javascript or JQuery for example. You can also do this in the backend before sending the data to the user (via PHP or JSP for example).

If you can change the HTML structure, it is much better to use the image tag for this, since 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>