responsive_images and bootstrap card-img-top

63 views
Skip to first unread message

Serge Victor

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

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?

Longinos

unread,
Nov 9, 2020, 2:25:56 AM11/9/20
to ngx-pagespeed-discuss
Hi
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

unread,
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":


thanks,
Serge

Serge Victor

unread,
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?

S.

Longinos

unread,
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
Forward
0 new messages