Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Use srcset and sizes attributes?

See original GitHub issue

Is it possible to use responsive image markup (srcset and sizes) with react-image-lightbox?

I’d like to avoid hard-coding a single mainSrc image file to be used on every screen size… Is there a way to dynamically select the mainSrc image based on the viewport width?

Issue Analytics

State:
Created 6 years ago
Reactions:3
Comments:5

Top GitHub Comments

1reaction

chaddjohnsoncommented, Mar 3, 2020

This would be a key, useful feature.

0reactions

JackHowacommented, May 14, 2020

Looking into this. It looks like there’s some styles transform the image dynamically.

with transform css in image Screen Shot 2020-05-13 at 8 20 48 PM

without css transform. at least showing the image at actual size Screen Shot 2020-05-13 at 8 20 57 PM

Basic image passing in being mocked. Let me know if you have any goals for how you’d want to pass in the srcSet, currently thinking:

  // [ { intrinsicSize: '100w', imageUrl: 'https://image.jpg }]
  mainSrcSet: PropTypes.array,

https://github.com/JackHowa/react-image-lightbox/tree/ISSUE-87-image-src-set

Top Results From Across the Web

Responsive images - Learn web development | MDN

The srcset attributes contain the path to the image to display. Just as we saw with <img> above, <source> can take a srcset...

Responsive images with srcset and sizes - Medium

These tag attributes helps serving better images to the user and improves the website loading time.

Srcset and sizes attributes | | Can I use... Support ... - CanIUse

The srcset and sizes attributes on img (or source ) elements allow authors to define various image resources and "hints" that assist a...

A Guide to the Responsive Images Syntax in HTML - CSS-Tricks

Using srcset with width ( w ) descriptors like this means that it will need to be paired with the sizes attribute so...

HTML img sizes Attribute - Dofactory

The srcset and sizes attributes work together to create responsive images. The srcset attribute points to image URLs. And sizes specifies image sizes...