facebook / facebook/docusaurus

Image distortion (stretching vertically)

Aperta
#9,462 12 commenti 1 reazione 0 assegnatari Vedi su GitHub
bug domain: theme
Lingua principale
TypeScript
Stelle
66.2k
Fork
10k
Merge medio
1g 3h
PR unite (30g)
52

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.