Отрегулируйте ширину и высоту динамически

Question

Я пытаюсь интегрировать Cloudinary в мою веб-страницу.Проблема в том, что когда я использую код ниже:

<div class="col-md-4 col-xs-6 text-center product-image">
    <?php 

    echo cl_image_tag($product['product_url'], 
        array("width"=>400, "height"=>300, "crop"=>"fill"));

    ?>
</div>

Изображение не реагирует на изменения из-за фиксированных пропорций: "width"=>400, "height"=>300.

Есть ли способ динамической регулировки этих параметровна ширину и высоту, которые Bootstrap определяет для div?

Я пробовал это:

<img class="img-fluid img-thumbnail" style="max-width: 400px; max-height: 300px;" src="<?php echo $product['product_url']; ?>">

Но тогда размер каждого изображения различен, потому что у каждого есть разные размеры и аспекткоэффициенты.

Answer 1

Почему вы не можете использовать класс .img-fluid с максимальной шириной: 100%;и высота: авто; `

Эта ссылка может помочь

. При использовании .img-thumbnail не следует использовать ширину и высоту

Вот эта ссылка

Answer 2

Вы можете попробовать добавить это к css:

.product-image img {
  width: 100%;
}