Images wider than editor are shrunk horizontally

[mmotyczynska]

Provide a description of the task

After introducing the width and height attributes for images, if an image is added that is wider than the width of the editor, it will be shrunk horizontally. This is due to the max-width: 100% for images, while the height is taken from the new height attribute. As a result, the image is only as wide as the editor, but the height remains unchanged.

The task is to force the images to have a good appearance in the above cases.

[mmotyczynska]

Problems to be solved:

• [Problem 1] Images (inline) wider than editor and with height set are shrunk (in editing)
• [Problem 2] Images (block) wider than editor and with height set are shrunk (in editing)
• [Problem 3] Images (block) wider than parent container and with height set are shrunk (in data)

Solution for [Problem 1]:

• [editing] height: auto (for all inline) -> fixes the [Problem 1], but creates:
• [Problem 4] Images (inline) with broken aspect ratio are displayed incorrectly, because height: auto overrides the height of the image (in editing)

Solution for [Problem 2]:

• [editing] height: auto (for all block) -> fixes the [Problem 2], but creates:
• [Problem 5] Images (block) with broken aspect ratio are displayed incorrectly, because height: auto overrides the height of the image (in editing)

Solution for [Problem 3]:

• height: auto (for block also for data) -> fixes [Problem 3], but there is one more:
• [Problem 6] Images (block) with broken aspect ratio are displayed incorrectly, because height: auto overrides the height of the image (in data)

Solution for [Problem 4]:

• [editing] set aspect-ratio (for inline) -> fixes [Problem 4]

Solution for [Problem 5]:

• [editing] set aspect-ratio (for block) -> fixes [Problem 5]

Solution for [Problem 6]:

• [data] set aspect-ratio (for block) -> fixes [Problem 6]

[Problem 7]: Inline images with broken aspect ratio and resized are not displayed correctly (data).

Solution for [Problem 7]:

• [data] set aspect-ratio (for inline) but only if it’s resized -> fixes [Problem 7]

Summary - we should add:

• height: auto for:
  • Editing inline
  • Data inline (resized only)
  • Editing block
  • Data block
• aspect-ratio for:
  • Editing inline
  • Data inline (resized only)
  • Editing block
  • Data block