# Onebox图片纵横比导致图片变形

**URL:** <https://meta.discourse.org/t/onebox-image-aspect-ratio-squashing-images/259412>\
**Category:** Support\
**Created:** [2023年三月25日 18:21 UTC](https://meta.discourse.org/t/onebox-image-aspect-ratio-squashing-images/259412 "2023-03-25T18:21:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)\
**Post date:** [2023年三月25日 18:21 UTC](https://meta.discourse.org/t/onebox-image-aspect-ratio-squashing-images/259412/1 "2023-03-25T18:21:20Z")

</div>

版本：3.1.0.beta3

Onebox 图像的纵横比有变化吗？

图像现在被挤压到一边了，我可以在主题中修复它，还是有其他原因？

提前感谢

---

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [2023年三月25日 19:07 UTC](https://meta.discourse.org/t/onebox-image-aspect-ratio-squashing-images/259412/2 "2023-03-25T19:07:47Z")

</div>

你好 🙂

你能分享一个截图，或者最好是分享一个展示此问题的帖子的链接吗？

---

<div class="post-metadata">

**Author:** ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)\
**Post date:** [2023年三月25日 19:09 UTC](https://meta.discourse.org/t/onebox-image-aspect-ratio-squashing-images/259412/3 "2023-03-25T19:09:00Z")

</div>

我都可以做

> **[Random Eliquid Recipe - Goph's Bloody Piña Colada Ice Cream](https://vapingcommunity.co.uk/t/random-eliquid-recipe-gophs-bloody-pina-colada-ice-cream/7246)**
>
> Check out this random eliquid recipe by @gopher\_byrd why not give it a mix

 ![download](https://global.discourse-cdn.com/meta/original/4X/a/4/c/a4c3f75d654e42e873e8c7f6906777710a2db9e1.png)

---

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [2023年三月25日 19:38 UTC](https://meta.discourse.org/t/onebox-image-aspect-ratio-squashing-images/259412/4 "2023-03-25T19:38:39Z")

</div>

您的网站上的图片被拉伸了，但 Discourse 上的没有：[Goph's Bloody Piña Colada Ice Cream - gopher\_byrd](https://vccalc.vapingcommunity.co.uk/recipe/18223)

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/d/b/edb8a55af37fccefd99aa52b12d479a5b770c19c.jpeg)

Discourse 上的 onebox 保持了原始比例（这是正确的比例），没有被拉伸。

您可能需要通过将以下 CSS 代码替换为另一段 CSS 代码来修复您网站（而不是 Discourse）上的此问题：

```css
.recipe-details img {
    width: 100%;
    max-height: 300px;
}

```

为

```css
.recipe-details img {
    width: auto;
    max-height: 300px;
}

```

---

<div class="post-metadata">

**Author:** ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)\
**Post date:** [2023年三月25日 19:54 UTC](https://meta.discourse.org/t/onebox-image-aspect-ratio-squashing-images/259412/5 "2023-03-25T19:54:57Z")

</div>

谢谢，我会看看

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2023年四月24日 19:55 UTC](https://meta.discourse.org/t/onebox-image-aspect-ratio-squashing-images/259412/6 "2023-04-24T19:55:21Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.