XF 1.4 Image : responsive automatic resizing

[kankan]

Hello,

I have set an image to illustrate a forum category through Widget Framework HTML :



What is the best way to make this image auto responsive on mobile devices ?

Thanks for your help.

 

[Paul B]

I don't know how you have added it but in general adding max-width: 100% to the CSS should then cause it to automatically shrink to fit the container as the window width reduces.

 

[kankan]

Hi Brogan,
Thanks.
I add it in a Widget trough Widge Framework
I just add width="100%" and it went ok.
Thanks

 

[Lukas W.]

• Your Image does not have the content class, causing the selector “img.content“ not to affect it
• There is no use in wrapping it in a <center>-tag if you then declare it to float left
• Width: 100% will never take effect, as you declared it width: auto !important before and important declarations can ponly be overriden by other important declarations - without regarding the fact that declaring the same attribute twice within a single selector is “stupid“ anyway as only one can take effect
• Remove both width-declarations and replace them with the one from @Brogan, then it will work

PS: Avoid using !important whereever you can. If your attribute doesn't show any effect, you're likely to have either the wrong or a not precise enough selector.

 

[kankan]

Thanks katsulynx : i just add width="100%" after image src and display is OK

 

[Arty]

Don't do that. Setting width to 100% will scale up small images. Instead add style="max-width: 100%;"

 

[kankan]

All is ok :

Desktop :



Mobile :