Related posts block thumbnails appears slightly distorted in some viewport widths

[ariel-maidana]

Quick summary

The featured image block crops the images automatically to be 350px wide by 200px tall (1.75:1 ratio).

However, in some specific viewport widths the images appear slightly distorted:

https://github.com/Automattic/wp-calypso/assets/4965723/b0618fc5-5840-4027-9e88-9cce82374379

Steps to reproduce

1. Activate Payton.
2. Add a Related Posts block to the Single template.
3. Visit a post.
4. Use the browser developer tools to see the mobile view. Set it to responsive.
5. Adjust the viewport width until you see a distortion in the thumbnails.

What you expected to happen

The image should not be distorted regarding of the screen size.

What actually happened

Thumbnails are slightly distorted in some viewport widhts.

Impact

One

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

No response

Logs or notes

Context: 6363582-zd-woothemes

Workaround (tested in Payton):

/ Set height for featured images in Related Posts block /

.jp-related-posts-i2__post-img-link img { height:100%; }

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 6363582-zen

[cuemarie]

Triaging in process - related posts block takes a bit to update once set up. Will return in a day to complete scrubbing

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

• Replicated on a simple site in themes Payton and Twenty Twenty-Three

Screenshots/Recordings

Payton

https://github.com/Automattic/wp-calypso/assets/27249804/25d2ffb4-c121-4a29-9ce3-42807766d0e7

Twenty Twenty Three

https://github.com/Automattic/wp-calypso/assets/27249804/49c014e4-4333-4bba-85fe-a5dfa2ff7a7e

📌 ACTIONS

• Assigned to Other
• CC @jeherve for Jetpack's awareness on the Related Posts block

[github-actions[bot]]

This issue has been marked as stale. This happened because:

• It has been inactive for the past 6 months.
• It hasn’t been labeled `[Pri] BLOCKER`, `[Pri] High`, `[Type] Feature Request`, `[Type] Enhancement`, `[Type] Janitorial`, `Good For Community`, `[Type] Good First Bug`, etc.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.