ePublishing Knowledge BaseePublishing Knowledge BaseePublishing Knowledge Base Common Responsive Design QuestionsWhy do my images look squished in the body of my article, blog posts, landing page or other content?

Why do my images look squished in the body of my article, blog posts, landing page or other content?

When you add an image as-is into the body of your content using the Media Manager without resizing it, the image will never appear "squished." Default style rules allow those images to scale or resize depending on the device you are using, including a desktop computer, laptop, tablet or smartphone.

However, when you need to manually resize due to the source image's being too large, take the following steps to make sure that the image will scale properly no matter which device your reader is using.

If your photo is "squished," like the below - where the height and width are not proportional - open your article, and click on the image in the WYSIWYG editor.

If your photo is "squished," like the below - where the height and width are not proportional - open your article, and click on the image in the WYSIWYG editor.

Click the image, and then click the Image icon in the WYSIWYG.

Click the image, and then click the Image icon in the WYSIWYG.

When the Image Properties box opens, you'll likely see that the width and height are entered. The lock icon will likely be broken.

When the Image Properties box opens, you'll likely see that the width and height are entered. The lock icon will likely be broken.

To fix the size, delete the height and set the width at its original or preferred size. The height will adjust automatically.

To fix the size, delete the height and set the width at its original or preferred size. The height will adjust automatically.

To force the height measurement to appear, click on the lock icon. This is not required. Your image will reset properly as long as you don't manually enter a number in the height field.

To force the height measurement to appear, click on the lock icon. This is not required. Your image will reset properly as long as you don't manually enter a number in the height field.

While in the Image Properties box, make any alternative text updates, or border and space/padding adjustments to your image if desired.

While in the Image Properties box, make any alternative text updates, or border and space/padding adjustments to your image if desired.

This is not required.

Click the Advanced tab.

Click the Advanced tab.

If there is any reference to height in the Style field, highlight and delete it. Leave all other styles alone.

If there is any reference to height in the Style field, highlight and delete it. Leave all other styles alone.

Click the OK button to confirm your changes.

Click the OK button to confirm your changes.

Click Commit Changes and Save your article changes.

Your photo should no longer appear squished when you open your article on a phone or tablet.

Note: You must follow these rules because the inline styles that are created using the height attribute in an image form trump the external CSS file. This is based on the common rules for how CSS works.