How to change size of image and put it into a rectangle box

Question

First time associating with javascript and have been trying to adjust size of thumbnail(image from database) but cant seem to get it and also i tried using canvas to acchieve a rectangle box but it does not show at all too. Thank you.

Here are my JS codes:

 //This function is to call the movies api and get all the movies //that is showing in Shaw Theatres for Showing Now and Coming Soon function getRestaurantData() { var request = new XMLHttpRequest(); request.open('GET', restaurant_url, true); //This function will be called when data returns from the web api request.onload = function() { //get all the movies records into our movie array restaurant_array = JSON.parse(request.responseText); //fetch comments //fetchComments(); //call the function so as to display all movies tiles for "Now Showing" displayRestaurant(); }; //This command starts the calling of the movies web api request.send(); } //This function is to display the movies tiles (edit index pg the thumbnail) //that filters based on "Now Showing" or "Coming Soon“ function displayRestaurant() { var table = document.getElementById("restaurantTable"); var restaurantCount = 0; var message = ""; table.innerHTML = ""; totalRestaurant = restaurant_array.length; for (var count = 0; count < totalRestaurant; count++) { // if (restaurant_array[count].availability == category) // { var thumbnail = restaurant_array[count].thumb; var resname = restaurant_array[count].restaurant_name; var cell = '<div class="col-md-3" style="float: none; margin: 0 auto;">' + '<div class="front">' + '<a id="restaurants" href="#" data-toggle="modal" data-target="#resModal" item=' + count + '>' + '<img class="img-fluid img-thumbnail" src=' + thumbnail + ' />' + // '<canvas id="mybox" width="400" height = "400"></canvas>' + '</a>' + '</div>' + '<div class="back">' + '<div class="bg-dark mystyle text-center py-3" >' + '<span>' + resname + '</span><br>' + '<button href="#" data-toggle="modal" data-target="#resModal" item="' + count + '" type="button" class="btn btn-primary btn-sm" onClick="showRestaurantDetails(this)" >See More</button>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>'; table.insertAdjacentHTML('beforeend', cell); restaurantCount++; } message = restaurantCount + " Restaurants "; document.getElementById("summary").textContent = message; document.getElementById("parent").textContent = ""; }

Answer 1

Assuming your image source is valid jpeg or base64 you can add object-fit CSS property to img tag to adjust and fit the image in rectangle.

<img src="thumnail.jpeg" class="img-rectangle"/>

And CSS code as this,

.img-rectangle { object-fit: cover; }

You can refer to object-fit CSS property from this link .