facebook / facebook/docusaurus

Image distortion (stretching vertically)

Đang mở
#9,462 12 bình luận 1 reaction 0 người được giao Xem trên GitHub
bug domain: theme
Ngôn ngữ chính
TypeScript
Star
66.2k
Fork
10k
Merge trung bình
1 ngày 3 giờ
Pull request đã merge (30 ngày)
52

Mô tả

### 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.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.