facebook / facebook/docusaurus

Image distortion (stretching vertically)

オープン
#9,462 コメント 12 件 リアクション 1 件 担当者 0 名 GitHub で見る
bug domain: theme
主要言語
TypeScript
スター
66.2k
フォーク
10k
平均マージ
1日 3時間
マージ済み PR(30日)
52

説明

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Prerequisites

- [X] I'm using the latest version of Docusaurus.
- [X] I have tried the `npm run clear` or `yarn clear` command.
- [X] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [X] I have tried creating a repro with https://new.docusaurus.io.
- [X] I have read the console error message carefully (if applicable).

### Description

I am migrating from Gatsby to Docusaurus 3 (I am running rc-1). I am seeing distortion in images. The example shown in the links below is added to the doc with `![alter](../assets/6.1.2-2.png)`

Images are distorted, stretched vertically.

I am running a basic Docusaurus v3 install (rc 1 from yesterday), I did not add change any settings, just enabled i18n, versioning, and auto-collapse on sidebar categories.

[example in Docusaurus v3 (1/3 down the page)](https://docs-stage.starrocks.io/docs/2.5/using_starrocks/Using_bitmap/)

[original image](https://docs-stage.starrocks.io/assets/images/6.1.2-2-6a82bd242b24c4e2c7a406aa3c1cfa89.png)

[example in Gatsby](https://docs.starrocks.io/en-us/2.5/using_starrocks/Using_bitmap)

### Reproducible demo

git@github.com:DanRoscigno/docusaurus-image-stretch.git

### Steps to reproduce

I can't reproduce this in a small site. My docs have 7,000 pages, and I suspect that this may have something to do with it. I am going to try some experiments (only build one locale, and if necessary only one version in one locale) to see if I can see when the images get distorted.

I will add a comment when I try the above experiment.

1. clone the above repo
2. yarn install
3. yarn build
4. yarn serve
5. open http://localhost:3001/docs/tutorial-basics/create-a-document

### Expected behavior

I would like the images to appear as if width and height were not set, removing these from the generated HTML gives the proper dimensions.

### Actual behavior

The same image when added to a small site looks great, but in my 7,000 page site the height is stretched.

### Your environment

- Builds were tested in GitHub actions and on macOS 14 (arm). On macOS I have started running the builds in Docker so that I can reduce the number of cores as I run out of heap if all 12 cores are used by node)
- latest Chrome and latest Firefox
- NODE_OPTIONS="--max-old-space-size=8192"

### Self-service

- [ ] I'd be willing to fix this bug myself.

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。