Issue Checklist

• I understand that issues are for feedback and problem solving, not for complaining in the comment section, and will provide as much information as possible to help solve the problem.
• My issue is not listed in the FAQ.
• I've looked at pinned issues and searched for existing Open Issues, Closed Issues, and Discussions, no similar issue or discussion was found.
• I've filled in short, clear headings so that developers can quickly identify a rough idea of what to expect when flipping through the list of issues. And not "a suggestion", "stuck", etc.
• I've confirmed that I am using the latest version of Cherry Studio.

Platform

macOS

Version

v1.7.24

Bug Description

When a link provides og:image metadata, the OG preview card image may overflow its container and cannot be displayed properly.

In OGCard.tsx, the PreviewImageContainer has a fixed height of 9rem with overflow: hidden, and the PreviewImage uses object-fit: cover. For some images (especially those with unusual aspect ratios), the image gets heavily cropped and the important content may not be visible, making the preview card less useful.

Related code: src/renderer/src/components/OGCard.tsx

const PreviewImageContainer = styled.div`
  width: 100%;
  height: ${IMAGE_HEIGHT};      // fixed 9rem
  min-height: ${IMAGE_HEIGHT};
  overflow: hidden;
`

const PreviewImage = styled.img`
  width: 100%;
  height: ${IMAGE_HEIGHT};
  object-fit: cover;            // crops the image
`

Steps To Reproduce

1. In a chat conversation, send or receive a message containing a link that provides og:image metadata
2. The OG preview card renders below the link
3. Observe that for some links, the og:image is cropped/overflowed and cannot display the full content

Expected Behavior

The og:image in the OG preview card should be displayed properly without important content being cropped or overflowing. Consider using object-fit: contain or providing a fallback mechanism so that the image fits the container while remaining fully visible.

Relevant Log Output

No response

Additional Context

The container dimensions are fixed at 380px × 220px with the image area taking 9rem height. Images with significantly different aspect ratios than the expected landscape format will be heavily cropped by object-fit: cover.

og:image Size Standards

The Open Graph protocol has industry-standard recommended image dimensions:

The dominant standard is 1200×630px (1.91:1 landscape). Most well-configured websites follow this convention, so the current fixed-height object-fit: cover approach works for them.

However, this issue is more likely to be triggered by:

1. Non-standard og:image — e.g., square logos or vertical images used as og:image
2. Pinterest-style tall images — 2:3 ratio gets severely cropped in a landscape container
3. Fallback images — when no og:image is set but a fallback image is used, the dimensions are unpredictable