调整宽度和高度dinamically Cloudinary

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

为什么你不能使用最大宽度为100％的班级.img-fluid;和高度：auto;`

这link可能会有所帮助

使用.img-thumbnail时，不应使用宽度和高度

以下是link

Answer 2

您可以尝试将此添加到css：

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