CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Pavel Kirillov
Pavel Kirillov

Reputation: 37

How to keep <div> with a Background image have dynamic height

I need to mimic the following behavior of the div with a background Image.

The page has 3 div on top of one another. They have a maximum width of 600px. When opened on a smaller screen the width adjusts to the the screen, and the height should adjust too, keeping the aspect ratio of the image which is always 10/7

I tried playing with the background-size style attribute, but that doesn't change the height of the div, so the picture ends up being clipped. I can't afford to clip the image.

Please advise

one enter image description here

two enter image description here

three enter image description here

Upvotes: 1

Views: 176

Answers (3)

Hashem Qolami
Hashem Qolami

Reputation: 99484

Well, actually it depends on your real markup but this could be a starting point:

The key point is that a percentage value on top/bottom padding is relative to the width of the box's containing block.

Also, using background-size: contain resizes the background image with aspect ratio. It's worth noting that this feature is supported in IE9+.

For further reading on responsive containers, you could refer to my answer here.

Example Here.

.box {
  background: url(http://placehold.it/300) 50% 50% / contain no-repeat;
  
  width: 80%; /* or whatever else */
  overflow: hidden;
  position: relative;
}

.box > span {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  padding: 5% 0;
}

.box > span:before,
.box > span:after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  padding: 2% 0;
}

.box > span:before {
  top: 0;
  background-color: rgb(255, 90, 79);
}

.box > span:after {
  bottom: 0;
  background-color: rgb(159, 31, 56);
}

.box:before {
  content: "";
  display: block;
  padding-bottom: 70%;
}
<div class="box">
  <span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dolores doloremque id quia esse! Doloribus voluptate nihil quam natus, similique, vero amet nesciunt excepturi. Optio dicta quas, dolores facere voluptatem.
  </span>
</div>

Upvotes: 2

David Gallardo
David Gallardo

Reputation: 504

This trick could help you:

#container{
  
background-image:url("http://cdn4.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png"); 
  background-size:cover;
  }

#ghostImg{
  width:100%;
  visibility:hidden;
  }
<div id="container">
  <img src="http://cdn4.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png" id="ghostImg"/>
  </div>

Upvotes: 1

Kosmas Papadatos
Kosmas Papadatos

Reputation: 1317

If your div only serves to show this image, you can do it simply with this css "trick"

div{
  background: url(http://gogoodscout.com/blog/wp-content/uploads/2015/02/Do-YOu-Feel-Good.jpg);
  width: 100%;
  padding-bottom: 49%;
  background-size: cover;
}
<div></div>

Notice how if you adjust the padding to reflect the aspect ratio, the div will always have the aspect ratio of the image.

Upvotes: 1

Related Questions