Responsive images
-
I looked at the QImg component and the responsive section using srcset … and that’s a great solution for when you are able to create the necessary additional images.
But, what about the situation where you don’t have access to the images … for example, maybe you’re pulling in the image from some external feed … what’s the best solution for making these images responsive? Is there anything in the CSS classes to help deal with this?
-
I’m noob-like on this subject, but this seems like a method.
https://www.w3schools.com/howto/howto_css_image_responsive.asp
Used in a pen…
https://codepen.io/smolinari/pen/mYJgLy
Anyone with more experience, please do chime in!!!
Scott
-
Thanks, @s-molinari I’ll try adding adding a class like that via a style on a the QLayout and see what happens.
I wasn’t expecting it to be so simple … as I normally use Bootstrap with their responsive image class by applying .img-fluid and had expected to find something similar in Quasar.
-
and thanks for the Codepen @s-molinari
-
No problem.
Scott
-
The downside of this approach will be the size of the image (in kB) that will be the same even for smaller resolutions/devices (considering an image with big resolution/size); but the other way around may be an issue too where you have a small image that will be stretched for bigger resolutions/devices.
A solution could be a crawler to download the image(s) and resize them in parallel in a background task (in the case of the big resolution).
-
@wcomnisky Agree with what you are saying … and that’s fine when things are relatively static …
But, when things are more dynamic … such as getting images from a feed that is constantly changing … it’s not really practical to create resized images that might only be required on a very short-term temporary basis.
-
@digiproduct Yes, indeed. I imagined that it could be the case.
