如何更改圖像的大小並將其放入矩形框

Question

第一次與 javascript 相關聯，一直在嘗試調整縮略圖的大小（來自數據庫的圖像），但似乎無法獲得它，我也嘗試使用畫布來實現矩形框，但它根本沒有顯示。 謝謝你。

這是我的JS代碼：

 //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

假設您的圖像源是有效的 jpeg 或 base64，您可以將object-fit CSS 屬性添加到 img 標簽以調整和適合矩形中的圖像。

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

和這樣的 CSS 代碼，

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

您可以從此鏈接中參考 object-fit CSS 屬性。