Fix: change height and object fit attributes #20246

[morfenza]

What type of PR is this? (check all applicable)

• Refactor
• Feature
• Bug Fix
• Optimization
• Documentation Update

Description

Changes the attributes object-fit and max-height for .crayons-article__cover__image in app/stylesheets/views/articles.scss, the cover image now behaves as expected. Although it is one solution I'd like to discuss possible alternatives!

Related Tickets & Documents

• Closes Invalid cover photo preview #20246

QA Instructions, Screenshots, Recordings

System Specs:

• OS: Manjaro Linux x86_64
• Browser: Firefox 122.0 (64-bits)
• I've used dip to run the application locally

Before the change:

After the change:

Added/updated tests?

• Yes
• No, there is no need
• I need help with writing tests

[github-actions]

Thank you for opening this PR! We appreciate you!

For all pull requests coming from third-party forks we will need to
review the PR before we can process it through our CI pipelines.

A Forem Team member will review this contribution and get back to
you as soon as possible!

[Link2Twenty]

It might be better to use aspect ratio for this

&__image {
      display: block;
      margin: auto;
      max-width: 100%;
      height: auto;
      object-fit: cover;
      aspect-ratio: 50 / 21;
      max-height: calc(
        100vh - var(--header-height) - 2 * var(--layout-padding)
      );
/* rest of code as normal */