DEV Community

Discussion on: Refactoring a small Next app to use Hooks

Collapse
 
jescalan profile image
Jeff Escalante

Curious about the background image component - is there any reason you didn't use an img element with srcset for this functionality?

Collapse
 
selbekk profile image
selbekk • Edited

Great question!

In this case, there were two reasons. Firstly, I animate the transition from one image to the other. Secondly, I wanted to use the image as a background image (and therefore leverage background-size: cover).

Also, I didn’t think of the srcset prop, to be honest 🙈

Collapse
 
jescalan profile image
Jeff Escalante

Cool thanks for answering so quickly! In case you end up in this situation again and feel like you want to avoid inline styles here, you can use object-fit: cover in css to emulate the same behavior as background-size: cover on a native image element. This is pretty helpful because it lets you get that behavior and also take advantage of the performance benefits of srcset 😀