This is an example of a header image that changes based on the device's orientation and always fits to fill the full screen.
It was developed for use in the February 2019 Los Angeles Times series, "Surrounded: Killings near school, and the students left behind."
You can learn more about the CSS techniques used here by reading Mozilla's tutorials on responsive images and object-fit.
This page's source code is free and open on GitHub.