Image distortion

[jimmythepants]

Hi - I raised an issue on wordpress.org as follows:

I have an issue with the images on a blog page – for some reason they are all stretched and distorted. Not sure why but have fixed them by adding CSS:

.page-id-21 img { max-width: 100%; height: auto; }

Whilst this corrects the images issue the header is now corrupted and fills the whole width of the screen and is pixelated (I presume the header is an image as well). Can anyone help??

The page I need help with: https://catherinehayward.co.uk/blog/

And received a couple of responses including:

_**The issue in your case is that all the images are applied with inline width and height property. You can check this by inspecting any distorted image and then removing the inline width and height property of the image from browser developer tools, the image will get into its actual form.

However, this is an issue from your theme’s end (blankslate-child), So it would be best for you to communicate with the theme’s official support channel for a precise solution.**_

Not sure what to do next??? Please can someone advise?

[ghost]

Hi.

I am not the author of this theme, but I will respond to this just to explain something that hopefully will help you.

This 'theme' is meant to be used as a starting to point for developers to create their own custom theme from scratch. That's why there is NO CSS included with it.

So the responses you've been given are completely true and accurate. However the last one suggesting you contact the theme's official support channel is not relevant, as this is not that kind of theme.

But anyway, the problem you are having is that your CSS is instructing the images to set the width to 100% of it's parent container, but to do nothing with the height. As a result, the original height of the image is being used.

Also the CSS rule you included needs to be made aware that this will only affect one page, and will affect EVERY image on that page (including the header) so you probably don't want to use that.

When inspecting your blog page, instantly I can tell you that adding height:auto to the .wp-block-image img rule will solve the display issues you have.

It's difficult to tell you where this is because you're optimising your CSS file but your rule should look like this:

.wp-block-image img {
    max-width:100%;
    height:auto;
}

Adding in height:auto will fix your image issues across your entire site, and this will only target images you insert into blogs, and not in your header, footer or anywhere else.

Hope this is helpful. Lee

[jimmythepants]

Thanks Lee - just tried this and it looks like it's sorted the issue out. Much appreciated.

James

[ghost]

You're very welcome.

[fgeierst]

Here is how images (and embeds) are sized in Twentytwentyone:

img {
    display: block;
    height: auto;
    max-width: 100%;
}

/* Classic editor images */
.entry-content img {
    max-width: 100%;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object,
video {
    max-width: 100%;
}

https://github.com/WordPress/twentytwentyone/commits/trunk/assets/sass/04-elements/media.scss

[bhadaway]

Hello,

Original creator of BlankSlate here. I'm sorry for the long hiatus, but I have been given permission to once again manage the project. So, I will again be pushing code updates and helping with user support.

Please let me know if you still need help with this specific issue and even if not, I would still like to get your feedback anyway:

https://github.com/tidythemes/blankslate/issues/23

Thanks!