2016-05-17 2 views
0

У меня есть веб-сайт, который имеет много категорий, каждая категория имеет собственное назначенное изображение, хранящееся внутри моего db, поэтому, когда на веб-сайте появляется сообщение о том, что на сайте появляются байки, изображение на велосипедах вызывается, и когда вызывается продукт из стульев категории, назначенное изображение стула из БД появляется как заголовок для этой страницы продуктов.PHP: Сделать изображение сохраненным в базе данных отзывчивым при вызове

Моя проблема заключается в том, как сделать это изображение чувствительным, поскольку оно сохраняется в БД, я делаю 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> 
+2

try http://stackoverflow.com/questions/24695992/how-to-make-image-responsive-inside-a-div –

+1

Тот факт, что изображение поступает из базы данных, совершенно не имеет значения. Изображение можно сделать отзывчивым, используя типичный HTML/CSS. –

ответ

1

Когда мы храним изображения в БД очень медленно. Поэтому, пожалуйста, избегайте этого варианта. Отображение изображений в ответном виде Вы просто пишете мультимедийные запросы для разных устройств

+0

см. Https://studio.uxpin.com/blog/media-queries-responsive-web-design/ –

2

Вы можете установить ширину и высоту в css, чтобы сделать изображение чувствительным.

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

Если у вас есть проблемы с устройством, вы можете обратиться за запросом на медиа. EG:

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

Также refer.

Смежные вопросы