Discussion on: Refactoring a small Next app to use Hooks

selbekk profile image
selbekk Author

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 🙈

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 😀