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 🙈
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 😀
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Curious about the background image component - is there any reason you didn't use an img element with
srcset
for this functionality?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 🙈
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 asbackground-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 ofsrcset
😀