I'm currently utilizing Bootstrap's 4 grid system to showcase images of varying sizes from unsplash.com on a webpage.
However, I'm facing an issue in figuring out how to create a fixed-sized thumbnail for all images that can fit into their respective containers regardless of their height.
Below is a sample code snippet:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<title> Document </title>
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity = "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin = "anonymous" />
</head>
<body>
<div class = "container-fluid mt-5 py-3 py-md-5">
<div class = "row text-center text-lg-left">
<div class = "col-lg-3 col-md-4 col-6">
<a asp-area = "" asp-controller = "Gallery" asp-action = "WeddingPhoto">
<img class = "image-card img-fluid img-thumbnail" src = "" alt = "" />
</a>
</div>
<div class = "col-lg-3 col-md-4 col-6">
<a asp-area = "" asp-controller = "Gallery" asp-action = "WeddingPhoto">
<img class = "image-card img-fluid img-thumbnail" src = "" alt = "" />
</a>
</div>
<div class = "col-lg-3 col-md-4 col-6">
<a asp-area = "" asp-controller = "Gallery" asp-action = "WeddingPhoto">
<img class = "image-card img-fluid img-thumbnail" src = "" alt = "" />
</a>
</div>
<div class = "col-lg-3 col-md-4 col-6">
<a asp-area = "" asp-controller = "Gallery"
asp-action = "WeddingPhoto">
<img class = "image-card img-fluid img-thumbnail" src = "" alt = "" />
</a>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity = "sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin = "anonymous"></script>
<script src = "https://cdn.jsdelivr.net/npm/cfprotect/__cf_email__" data-cfemail = "dbabb4ababbea9f5b1a89beaf5eaedf5eb">@</a>/dist/umd/popper.min.js"
integrity = "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity = "sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin = "anonymous"></script>
<script>
const imageCards = document.querySelectorAll(".image-card");
const url = "https://source.unsplash.com/collection/308700/300/?sig=";
const randomNum = () => {
return Math.floor(Math.random() * 100000);
};
for (let image of imageCards) {
let src = `${url}${randomNum()}`;
image.setAttribute("src", src);
}
</script>
</body>
</html>https://i.sstatic.net/bdOPG.jpg
Is there a specific Bootstrap class that I can use to maintain consistent image height and ensure fitting within the parent div?