I am facing an issue with a grid where I add grid-items, and then use the thumbnail class to provide dimensions to the thumbnail. When I insert an image into the <img> tag, it alters the height dimension, which is not desirable. I want the thumbnail to maintain the original dimensions I have set for it.
My content box looks like this when added to the grid:
$('.content').append('<div class="grid-item"> <img class="thumbnail" src='+thumbnail+'><div class="details"><img class="profileImg" src='+profPic+'><span class="portalTitle">'+caption+'</span></div></div>');
Below is the corresponding CSS code:
.content {
display: grid;
// additional CSS rules ...
}
.grid-item {
// additional CSS rules ...
}
.thumbnail {
// additional CSS rules ...
}
.details {
// additional CSS rules ...
}
.portalTitle {
// additional CSS rules ...
}
.profileImg {
// additional CSS rules ...
}
Sample HTML structure:
<div class="content">
<!-- Sample grid item example -->
</div>
Update: The issue seems to be related to the varying heights of the divs while the width remains consistent. How can I resolve this problem? Setting fixed heights leads to distorted scaling instead of dynamic adjustments.
See the image illustrating the issue (Where the divs have different heights instead of uniform dimensions similar to YouTube):https://i.sstatic.net/eOlud.jpg