Fitting a image with text underneath inside a fixed div size

Question

My question I would imagine is solved by some basic css, however I cannot seem to make it work. I simply have an larger image with text underneath. I want them to fit/scale into a fixed size of a div with a border, however I want it to be responsive in the way that I can change the div size, and it will still adjust appropriately. My problem is that the image pushes the text outside of my border div. Any help? I have a JSFiddle with a random google image for example, you can edit and repost if you'd like. Thank you.

https://jsfiddle.net/ehuwg7w2/1/

<div class="a">
    <img src="https://kremalicious.com/media/gen/Free-Monkey-Breath-Not-Soylent-Green-800by1200-47ce3e.jpg">
    <p>I want to be inside the div height, not outside!</p>
</div>

Answer 1

If You don't want to fix the height of div.a you can only use height:100%; instead of height:500px;

 .a { width: 400px; height: 100%; border: 1px solid black; display: block; margin: 0 auto; text-align: center; padding: 5px; } .a img { max-width: 100%; } 

 <div class="a"> <img src="https://kremalicious.com/media/gen/Free-Monkey-Breath-Not-Soylent-Green-800by1200-47ce3e.jpg"> <p>I want to be inside the div height, not outside!</p> </div> 

But if you need div.a to have fixed height and want to fit the image and the text inside its height, you can do it like this:

 .a { width: 400px; height: 500px; border: 1px solid black; margin: 0 auto; text-align: center; padding: 5px; display:table; } .a img { width: 100%; display:table-row; height:100%; } .ap{ display:table-row; height:1px; } 

 <div class="a"> <img src="https://kremalicious.com/media/gen/Free-Monkey-Breath-Not-Soylent-Green-800by1200-47ce3e.jpg"> <p>I want to be inside the div height, not outside!</p> </div> 

Answer 2

try this css

.a {
  width: 400px;
  height: 100%;
  border: 1px solid black;
  display: block;
  margin: 0 auto;
  text-align: center;
  padding: 5px;
}

.a img { max-width: 100%;
}

Answer 3

Please try the following:

 .a { width: 400px; height: auto; border: 1px solid black; display: block; margin: 0 auto; text-align: center; padding: 5px; } .a img { max-width: 100%; } 

 <div class="a"> <img src="https://kremalicious.com/media/gen/Free-Monkey-Breath-Not-Soylent-Green-800by1200-47ce3e.jpg"> <p>I want to be inside the div height, not outside!</p> </div> 

Answer 4

Just set height to 100% instead 500px

 .a { width: 400px; height:100%; border: 1px solid black; display: block; margin: 0 auto; text-align: center; padding: 5px; } .a img { max-width: 100%; } 

Answer 5

Just set your parent div height to auto ie .a height . Thus this automatically take your div and text inside of your div border.

 .a { width: 400px; height: auto;/*Changed this to auto*/ border: 1px solid black; display: block; margin: 0 auto; text-align: center; padding: 5px; } .a img { max-width: 100%; } 

 <div class="a"> <img src="https://kremalicious.com/media/gen/Free-Monkey-Breath-Not-Soylent-Green-800by1200-47ce3e.jpg"> <p>I want to be inside the div height, not outside!</p> </div>