Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typora image preview ignores max-width (as embedded attribute or in CSS) #6076

Open
hsandt opened this issue Jun 11, 2024 · 0 comments
Open

Comments

@hsandt
Copy link

hsandt commented Jun 11, 2024

Describe the bug
Image using the max-width attribute, or setting it via custom CSS, are not previewed properly in Typora in preview mode.

Exporting HTML (with styles) or PDF will respect max-width, however.

max-width itself seems recognized, as the #write section can be resized following https://support.typora.io/Width-of-Writing-Area/, but it doesn't work for images.

Using width will work, you can use it to compare.

This applies to both percentage and absolute values.

I haven't tested other elements like blocks of text or table, but that would be interesting to compare.

To Reproduce
Steps to reproduce the behavior:

  1. Prepare for dummy image dummy.png
  2. Enter Source Code Mode and enter the following HTML code:
<img src="dummy.png" max-width="50%">
  1. Switch back to preview mode
  2. See image still at full size
  3. Bonus: export HMTL and PDF to compare: those should work as expected

Expected behavior
Image should be limited to max-width, half of the page content in this case.

Screenshots / Screencasts
If applicable, add screenshots / screencasts to help explain your problem.

image

image

Sample Markdown File

If you're not a fan of Toshiro Mifune, you can use this dummy red rectangle:

dummy

Then use the HTML already mentioned above:

<img src="dummy.png" max-width="50%">

Desktop (please complete the following information):

  • OS: Linux Ubuntu 22.04

Typora Version
1.7.6

Additional context
I'm trying to make a flexbox in wrap mode to contain many small images.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant