Support srcset in CardMedia

[kaycebasques]

CardMedia component doesn't seem to support responsive images.

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Should be able to pass in a srcset attribute for image components in general.

Current Behavior

Not supported?

https://material-ui.com/api/card-media/

[oliviertassinari]

It's not. We would need to use a <img> element over a background image.
By the way, it would be better for SEO and accessibility to use an image element over a CSS background image.

[oliviertassinari]

It seems that supporting this feature would require us to rely on the object-fit: cover; CSS property. Something IE 11 doesn't support. We might have to wait 1 year or 2 before moving this issue forward. In the meantime, I fear the best alternative is to do it programatically in JavaScript.

[adeelibr]

We can do something like this as an alternative to object-fit: cover; https://codepen.io/studiotwist/pen/XdgqmZ?editors=0100

[oliviertassinari]

@adeelibr Thanks for sharing. I guess we can start experimenting with this workaround.

[adeelibr]

@oliviertassinari Can i experiment with this?

[adeelibr]

#12481 I have for now added a separate code for only Component type "img", If this feels okay, can i remove the rest and only keep the image part Line 46 to Line 51 in CardMedia.js @oliviertassinari

[oliviertassinari]

@kaycebasques Actually, it's supported, you can use the component property to render an image over a div with a background image.