动态调整宽度和高度 Cloudinary答案

【问题标题】：Adjust the width and height dinamically Cloudinary动态调整宽度和高度 Cloudinary
【发布时间】：2018-10-30 05:55:25
【问题描述】：

我正在尝试将 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']; ?>">

但是每张图片的大小是不同的，因为每张都有不同的尺寸和纵横比。

【问题讨论】：

你能添加更多的 HTML 代码吗？
当然，但是我可以添加什么？该 div 不在另一个 div 内，它只是在 body 内，并且没有与该 div 相关的其他 html 元素
您所说的`图像由于固定比例而没有响应`是什么意思？
我的意思是当我缩小网络浏览器时，图像不会减小它的大小

标签： php html twitter-bootstrap bootstrap-4 cloudinary

【解决方案1】：

为什么你不能使用 .img-fluid 类的 max-width: 100%;和高度：自动；`

这个link 可能会有所帮助

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

这里是link

【讨论】：

因为我希望所有图像的最大尺寸为 400x300，但要保持它们的原始纵横比，所以我需要裁剪图像。这就是我使用 cl_image_tag() 的原因
在 php 中裁剪图像使用链接https://stackoverflow.com/questions/1855996/crop-image-in-php#answer-1856049

【解决方案2】：

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

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

【讨论】：

但是当我调整窗口大小时图像仍然是 400x300