flutter_widget_from_html icon indicating copy to clipboard operation
flutter_widget_from_html copied to clipboard

Add support for responsive images

Open daohoangson opened this issue 4 years ago • 0 comments

Since #278 image source is somewhat supported. It would be great if HtmlWidget can pick suitable image using viewport size and pixel density.

Example 1, srcset and max-width:

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

Example 2, pixel density:

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg"
     alt="Elva dressed as a fairy">

Example 3, PICTURE tag:

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

Reference https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

daohoangson avatar Aug 15 '20 15:08 daohoangson