Adjust the width and height dinamically Cloudinary

Question

I am trying to integrate Cloudinary into my webpage. The problem is that when I use the code below:

<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>

The image is not responsive due to the fixed proportions: "width"=>400, "height"=>300.

Is there a way of adjusting these parameters dynamically to the width and height that Bootstrap defines for the div?

I have tried this:

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

But then the size of each image is different, because each one has different dimensions and aspect ratios.

sure, but What can I add? that div is not inside another div it's just inside the body and there is no other html element related to that one — Juanjo, May 22 '18 at 09:32
What you mean by ` image is not responsive due to the fixed proportions`? — mahan, May 22 '18 at 11:11
I mean that the image does not decrease it's size when I make the web browser smaller — Juanjo, May 23 '18 at 11:18

score 0 · Answer 1 · answered May 20 '18 at 11:20

0

Why cant you use class .img-fluid with max-width: 100%; and height: auto;`

This link may help

While using .img-thumbnail you should not use width and height

Here is the link

answered May 20 '18 at 11:20

Boopathi D

361
2
21

Because I want all the images to be at max 400x300 but keep their aspect ratio original, so I need to crop the image. That's why I'm using cl_image_tag() – Juanjo May 20 '18 at 11:28
for cropping the image in php use the link `https://stackoverflow.com/questions/1855996/crop-image-in-php#answer-1856049` – Boopathi D May 20 '18 at 11:32

score -1 · Answer 2 · answered May 20 '18 at 11:13

-1

You could try add this to css:

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

answered May 20 '18 at 11:13

Tymur Valiiev

637
9
25

But the images still 400x300 when I resize the window – Juanjo May 20 '18 at 11:18

Adjust the width and height dinamically Cloudinary

2 Answers2