What did you do?

Added object-position: top to the .hero__image in _hero.scss

Why did you do it?

230 identified a layout problem on wide screens where the hero was cutting off faces. The root cause is due to the `object-fit: cover` rule and the deafult behavior for image scaling and positioning. Setting `object-position: top` maintains the scaling behavior but positions the image so that most faces won't get cut off.

I considered changing the object-fit to contain however that dramatically changes the aesthetic by loosing the full-bleed look.

How have you tested it?

Tested in the browser, on a 15" Mac Book Pro with a resolution of 1920 x 1200 and zoomed out the browser content to render ~2800px wide. Images seem to hold up nicely in this range w/out too much cutting off.

Were docs updated if needed?

[ ] No
[ ] Yes
[x] N/A

Type of change

[x] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

[x] My code follows the style guidelines of this project
[x] I have performed a self-review of my own code
[ ] I have commented my code, particularly in hard-to-understand areas
[x] My changes generate no new console logs
[x] Fixes entire issue
[ ] Partial fix for issue

aharvard commented 2 years ago

Sure @davidnixon! The issue starts becoming apparent above 1300px screen widths due to the height of the hero GIF being maxed at 500px. Here's are some videos showing before/after at a couple large resolutions.

Before @ 1919px wide

Maximized Chrome window on Retina 15" MacBook Pro

https://user-images.githubusercontent.com/10472610/137318371-fcde2a2d-12fd-488f-9b81-f67ecccd4473.mp4

Before @ 2505px wide

https://user-images.githubusercontent.com/10472610/137318402-8bd94d28-9113-4584-a895-502aa5e2cfb3.mp4

After @ 1919px wide

Maximized Chrome window on Retina 15" MacBook Pro

https://user-images.githubusercontent.com/10472610/137319268-7b1cee3b-6f30-4598-b053-6839120f188b.mp4

After @ 2505px wide

https://user-images.githubusercontent.com/10472610/137319587-f0df0877-975d-42c9-a3b4-f43970c2e97b.mp4

aharvard commented 2 years ago

As I recorded the above, I realized that we could do one more thing to decrease the likelihood of an awkward crop.

For screen sizes above 1300px, we could increase the max-height of the GIF to be relative to the viewport width.

This increase in height could throw off the aspect ratio of the hero, but we can dial it in to strike a balance between face cropping and original design intent.

Please advise if y'all would like me to make this adjustment.