Handling Responsive Images from Editors Without Breaking Aspect Ratios

Images created with rich-text editors like TinyMCE often include width and height attributes. These values are useful because they describe how the image should appear. However, many layouts use global CSS rules like width: 100%, which silently override those attributes. The result is stretched images or broken proportions.

A better approach is to let both systems work together:

• If an image has a defined width, respect it.
• If it does not, make it responsive.
• Always keep the original aspect ratio.

The key idea is simple. CSS should only force full width on images that do not define their own size. At the same time, height should never be fixed. Let the browser calculate it automatically.

This approach is safe, predictable, and works well for content feeds, articles, and mixed image sizes.

Example HTML

<div class="content">
  <img src="example-a.png" alt="">
  <img src="example-b.png" alt="" width="300" height="300">
</div>

Example CSS

.content img {
  display: block;
  max-width: 100%;
  height: auto;          /* keeps the aspect ratio */
}

.content img:not([width]) {
  width: 100%;           /* only full-width if no width is defined */
}

Why this works

• Images with width and height keep their intended size
• Images without dimensions become responsive
• height: auto preserves the natural aspect ratio
• No cropping or distortion occurs

Avoid using object-fit: cover for normal content images, as it may cut off important parts. This solution keeps layouts clean, readable, and friendly for all screen sizes.