Currently, I am utilizing jQuery to adjust the flex-grow value of a wrapper div based on the aspect ratio of a figure's image. This approach was suggested here.
However, once I apply a border and padding to the figure, the images no longer retain the same height. Is there a way to factor in the border and padding when calculating to ensure all the images are of equal height? Or is there an alternative method to achieve consistent height for these figure images?
The disparity becomes evident when removing the border and padding from the figure CSS, resulting in all figure images having uniform height.
EDIT: Upon further observation, it appears that this issue presents differently in Chrome. While Firefox displays the content almost accurately, Chrome portrays the images at varying sizes!
$(document).ready(function() {
$('div.pack').css({
"display": "flex"
})
.children().each(function() {
$(this).css({
"width": "100%"
});
var $img = $(this).find('img');
var aspect = $img[0].naturalWidth / $img[0].naturalHeight;
$(this).wrap('<div style="display:flex; flex: 0% ' + aspect + ' 1;" />')
$img.css({
"width": "100%",
"height": "auto"
})
});
});figure {
padding: 4px;
border: 1px solid lightgray;
margin: 0;
}
div.pack>div:not(:last-child) {
margin-right: 1%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='pack'>
<figure>
<img src="http://via.placeholder.com/300x300">
<figcaption>Big caption here Big caption Caption here </figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/300x500">
<figcaption>Caption here</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/600x150">
<figcaption>Caption here</figcaption>
</figure>
</div>