responsive_images and bootstrap card-img-top

Skip to first unread message

Serge Victor

Nov 8, 2020, 10:19:54 AM11/8/20
to ngx-pagespeed-discuss

I noticed a crazy distortion of images when I use responsive_images and bootstrap card-img-top class together which makes images responsive. Images have proper width, but they are transformed to have original height.

Is there any solution to overcome that issue?


Nov 9, 2020, 2:25:56 AM11/9/20
to ngx-pagespeed-discuss
What other filters have you enabled?
Maybe you have some like this:
<div class="card" style="width: 300;">
<div class="card" > <img src="..." class="card-img-top" alt="..." width="150" height="150" >
If you have enabled the resize_images filter, the image is resized to 150x150, but the container is 300 width, so the image maybe is distortioned.
In a request basis you can enable or disable some filters:
so you can test whats happens when the filter become disabled.
Can you post some url to test?

Serge Victor

Nov 9, 2020, 1:59:37 PM11/9/20
to ngx-pagespeed-discuss
Hi, I am talking about responsive_images, not about resize_images.

For responsive_images, if I can read the manual properly, "In order to take advantage of this filter, the original image must explicitly specify height and width attributes":


Serge Victor

Nov 9, 2020, 2:01:24 PM11/9/20
to ngx-pagespeed-discuss
But yes, I am using resize_images in the same time, so maybe these two filters collide? If yes, is there a way to make them both working in the same time?



Nov 9, 2020, 3:20:41 PM11/9/20
to ngx-pagespeed-discuss
I don´t think is a collision between filters rather than maybe a missconception on how the whole thing works.

If you have a sized container (<div class="card" style="width: 300;">) and put a image ( <img src="..." class="card-img-top" alt="..." width="150" height="150" >) that don´t fit the container size then when the image is rendered, maybe is distortioned.

But I´m talking w/o seeing the page, so maybe I´m wrong.

If that´s the case, can you try alternatively these 2 options and see if some works:

1.- put the width of the image with the same size of the container, and the heigth according to maintain the ratio
2.- Let the image w/o width/heigth, the filter resize_image don´t work well but the image get other optimiztions and hopefully don´t look with distortion
Reply all
Reply to author
0 new messages