如何为图像设置自适应背景？

Question

Before(On my screen resolution (1024px))

After (On the other resulution - for example screen width:1500px)

 #quotes_div img{ width: 100vh; margin-left: 3%; margin-top: 3%; } #quotes_div{ position: relative; } #quotes_div #img{ width: 82.5%; height: 38.5vh; background: red; } 

 <div id="quotes_div"> <h3>My favorite quotes to which I adhere</h3> <i class="fa fa-quote-left fa-2x fa-inverse" aria-hidden="true"></i> <i class="fa fa-quote-right fa-2x fa-inverse" aria-hidden="true"></i> <p>Even an impossible dream can lead to action</p> <div id="img"> <img src="assets/fielding.jpg" alt="Field"> </div> </div> 

I need to the picture Nr.1 and "border"(background) will have same resolution. + I am sorry (I am not at formating text on stackoverflow)

Answer 1

To make your image responsive, and stay within the red border, don't force a specific height, just specify container and image as 100% and add padding around the image to show the red background.

See this example it now works, add or remove padding as you see fit:

 #quotes_div img{ width: 100%; } #quotes_div{ position: relative; } #quotes_div #img{ width: 100%; background: red; padding: 1em; } 

 <div id="quotes_div"> <h3>My favorite quotes to which I adhere</h3> <i class="fa fa-quote-left fa-2x fa-inverse" aria-hidden="true"></i> <i class="fa fa-quote-right fa-2x fa-inverse" aria-hidden="true"></i> <p>Even an impossible dream can lead to action</p> <div id="img"> <img src="http://placehold.it/1000x350" alt="Field"> </div> </div>