# 实验性 PhotoSwipeLightbox 组件出现意外缩放，破坏了原始图像的比例

**URL:** <https://meta.discourse.org/t/unexpected-scaling-in-experimental-photoswipelightbox-component-breaking-the-ratio-of-the-original-image/386788>\
**Category:** UX\
**Created:** [2025年十月27日 06:04 UTC](https://meta.discourse.org/t/unexpected-scaling-in-experimental-photoswipelightbox-component-breaking-the-ratio-of-the-original-image/386788 "2025-10-27T06:04:44Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![small-lovely-cat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/small-lovely-cat/32/579066_2.png) [@small-lovely-cat](https://meta.discourse.org/u/small-lovely-cat)\
**Post date:** [2025年十月27日 06:04 UTC](https://meta.discourse.org/t/unexpected-scaling-in-experimental-photoswipelightbox-component-breaking-the-ratio-of-the-original-image/386788/1 "2025-10-27T06:04:44Z")

</div>

> <https://github.com/discourse/discourse/pull/35616>
>
> The new experimental \`PhotoSwipeLightbox\` (siteSettings.experimental\_lightbox) c…ontain bugs when the image link exists in \`Discourse Solved\` or the upload component in \`admin/config/logo\`. The root cause is that \`PhotoSwipeLightbox\` need width and height from the already-loaded image, while \`Discourse Solved\` and the upload component don't have these attributes.
> 
> Without these attributes, the image will be stretched to fill the browser window, causing distortion, as shown in the figure attached.
> 
> This commit add a preload mechanism for images without dimensions to get their dimensions, so that they can be displayed normally.
> 
> Before fix:
> \`upload component\`
> \<img width="1600" height="801" alt="image" src="https://github.com/user-attachments/assets/ad1eb80d-a348-412a-a3d3-75701c97f6a4" /\>
> 
> \`Discourse Solved\`
> \<img width="1007" height="484" alt="image" src="https://github.com/user-attachments/assets/20d227c7-2539-463a-903d-4a83d8782460" /\>
> \<img width="1919" height="914" alt="image" src="https://github.com/user-attachments/assets/d0c8ef5f-05a6-48dc-b507-94b796b095b9" /\>
> 
> After fix:
> \`upload component\`
> \<img width="1603" height="758" alt="image" src="https://github.com/user-attachments/assets/03302997-9a43-425d-a7df-c218961a377a" /\>
> 
> \`Discourse Solved\`
> \<img width="1603" height="760" alt="image" src="https://github.com/user-attachments/assets/ced4355a-8818-4ef5-bce2-cb632165e3a9" /\>

新的实验性 `PhotoSwipeLightbox`（siteSettings.experimental\_lightbox）在图片链接存在于 `Discourse Solved` 或 `admin/config/logo` 中的上传组件时存在错误。根本原因是 `PhotoSwipeLightbox` 需要从已加载的图片中获取宽度和高度，而 `Discourse Solved` 和上传组件没有这些属性。

没有这些属性，图片将被拉伸以填满浏览器窗口，导致失真，如图所示。

此提交添加了一种预加载机制，用于获取没有尺寸的图片的尺寸，以便它们可以正常显示。

---

_[View the full topic](https://meta.discourse.org/t/unexpected-scaling-in-experimental-photoswipelightbox-component-breaking-the-ratio-of-the-original-image/386788)._