如何保持 <div> 具有背景图像的具有动态高度

Question

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

two

three

Answer 1

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> 

Answer 2

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.

Answer 3

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>