PHP：调用时使保存在数据库中的图像响应

我有一个网站，有许多类别，每个类别都有自己的指定图像存储在我的数据库中，因此当网站上出现lets say bikes的产品时，会调用bikes图像，当调用chairs类别中的产品时，db中指定的椅子图像会显示为该产品页面的标题

我在这里的问题是，如何使此图像在保存在DB中时具有响应性，是使图像显示在响应中的div具有响应性，还是有其他更有效的方法

 <div id='image'>
            <?php
            mysqli_report(MYSQLI_REPORT_INDEX);
            if (isset($_GET['rest_id'])) {

                $Rest = $_GET['rest_id'];

                $get_cat_img = "SELECT Cuisine_category,Category_img
   FROM Rest_Category
   INNER JOIN Rest_Details
   ON Rest_Category.CategoryID = Rest_Details.Cat_ID
   WHERE Rest_Details.Resturant_ID='$Rest'";

                $results = mysqli_query($dbc, $get_cat_img) or die("query is not working");
                $row = mysqli_fetch_array($results) or die("q not working");
                $img = $row['Category_img'];

                echo'<img id="img" src="data:image/jpeg;base64,' . base64_encode($img) . '" alt="Category_header" width="100%" height="300px">';     
            }
            mysqli_close($dbc);
  ?>
  </div>

---

当我们将图像存储在DB中时，速度非常慢。所以请避免这种选择。

---

在数据库中显示图像时，您只需为不同的设备编写媒体查询

当我们将图像存储在数据库中时，速度非常慢。所以请避免这种选择。

---

以响应方式显示图像您只需为不同的设备编写媒体查询

您可以在css中设置宽度和高度以使图像响应

img {
    width: 100%;
    height: auto;
}

如果您在任何特定设备上遇到问题，则可以进行媒体查询。例如：

@media only screen and (min-width: 400px) {
    img {
      width: 100% !important;
      height: auto !important;
    }
}

---

另外。

您可以在css中设置宽度和高度，使图像具有响应性

img {
    width: 100%;
    height: auto;
}

如果您在任何特定设备上遇到问题，则可以进行媒体查询。例如：

@media only screen and (min-width: 400px) {
    img {
      width: 100% !important;
      height: auto !important;
    }
}

还有。

试试看