Positioning caption within image border while maintaining aspect ratio - html

Question

I'm dealing with images that may or may not have a caption.
I've created a polaroid effect around each image via the following:
<div style="text-align:center">
<img src="daenerys.png" style="border: 10px solid #FAFAFA;border-bottom: 45px solid #FAFAFA;-webkit-box-shadow: 3px 3px 3px #9E9E9E; -moz-box-shadow: 3px 3px 3px #9E9E9E;box-shadow: 3px 3px 3px #9E9E9E;">
</div>
Results look acceptable:
But this can't support captions the way I want it to. I need to write a caption under the image, within the white border of the polaroid effect.
I changed my code to:
<div style="text-align:center;background-color: #ffffff;display: inline-block;padding: 10px;-webkit-box-shadow: 3px 3px 3px #9E9E9E; -moz-box-shadow: 3px 3px 3px #9E9E9E;box-shadow: 3px 3px 3px #9E9E9E;">
<img src="daenerys.png" style="display: block;margin: 0 auto;margin-bottom: 20px;width: 100%;">
<div class="cxl cgy"></div>
</div>
This gives me an image that is stretched:
How do I keep my image resolution and aspect ration intact, while ensuring the text dynamically grows the white space under the image as required? I've taken a look at this SO post for help, but to no avail.
The overall goal is to keep the polaroid look (even for images that have no caption), and to use the white space below the image to display text for images that do have captions.

Answer 1

I found a solution with keeping aspect ration:
<div style="text-align:center;background-color: #ffffff;display: inline-block;padding: 10px;-webkit-box-shadow: 3px 3px 3px #9E9E9E;-moz-box-shadow: 3px 3px 3px #9E9E9E;box-shadow: 3px 3px 3px #9E9E9E;">
<div style="display: inline-table;">
<img src="daenerys.png" style="display: block;margin: 0 auto;margin-bottom: 20px;width: 100%;">
<div class="cxl cgy" style="display: table-caption;width: 100%;caption-side: bottom;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae necessitatibus architecto quis non error placeat illo enim illum quo corrupti molestias id sint recusandae animi obcaecati, laudantium nostrum fugit eaque.
</div>
</div>
</div>
Here is preview link : https://codepen.io/ziruhel/pen/RjwmQg

Answer 2

For creating how you want to create the polariod, there is a new html tag that can have a caption and and image inside one element.
The Structure is this :
-- Figure
---- img
---- figcaption
I have made a jsfiddle keeping in mind your structure and the code also.
You can style the figure tag with your card stylings and also keep the text for caption if you want.
The jsfiddle link: https://jsfiddle.net/vmt5w1u8/
SCSS code:
figure {
text-align: center;
background-color: #ffffff;
display: inline-block;
padding: 10px;
height: 100%;
-webkit-box-shadow: 3px 3px 3px #9e9e9e;
-moz-box-shadow: 3px 3px 3px #9e9e9e;
box-shadow: 3px 3px 3px #9e9e9e;
img {
display: block;
margin: 0 auto;
margin-bottom: 20px;
width: 100%;
height: 100%;
}
figcaption {
text-align: center;
}
}
Figure tag reference link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

Answer 3

The reason you are getting image stretch is because you are not setting a fix/max width for your div, without width specified text will stretch the image as the width gets longer
Try adding:
div{
/*width:300px; use max-width if responsive*/
max-width: 300px; /*maximum width the image will stretch*/
box-sizing: border-box; /*include padding as part of the specified max-width above*/
}
Example:
div {
max-width: 300px;
box-sizing: border-box;
}
<div style="text-align:center;background-color: #ffffff;display: inline-block;padding: 10px;-webkit-box-shadow: 3px 3px 3px #9E9E9E; -moz-box-shadow: 3px 3px 3px #9E9E9E;box-shadow: 3px 3px 3px #9E9E9E;">
<img src="https://dummyimage.com/300x250/4168a3/fff" style="display: block;margin: 0 auto;margin-bottom: 20px;width: 100%;">
<div class="cxl cgy">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim.
</div>
</div>

Answer 4

You don't have to set max-width, just set .image width to width: 100% and height: auto
Fiddle: http://jsfiddle.net/MBLZx/2312

Answer 5

Setting max width to your image might help. Image will be resized to fit the aspect ratio without stretching beyond required width. And also the text content will be wrapped accordingly.
CSS:
.img-wrapper {
max-width: 500px;
padding: 10px;
background: #fff;
text-align: center;
position: relative;
box-sizing: border-box;
}
.image {
width: 100%;
}
.text {
word-wrap: break-word;
}
Here is the Fiddle.
Hope this helps :)