width:auto overwrite inline width of image

A client asked me to look into a problem he is having on his WP site.
When adding an external image into a post, with an original size of 800×640.
You can resize the image via the WordPress wysiwyg editor to, say 400×320.
the html part will look something like this when inspecing the element with firebug on front end or in the text tab of the editor:

<img class="" src="http://xxx.nl/images/externalimage.jpg" alt="" width="400" height="320" />

But on the front end the image is shown at its original 800×640 size.
When inspecting the element with firebug it shows:

img {
    height: auto;
    max-width: 100%;
    vertical-align: top;
    width: auto;
}

If I disable the ‘width’ line in firebug
The image resizes to 400×320.

How can I resolve this issue, so that the client can just do his thing with the images in the editor.

I can solve it myself on a individual case basis by adding a width to the containing span/p tag, but the client doesn’t know css or html and I can’t manually edit all the widths of the containing tags every time he posts something new.

The images will always be inside the ‘post’ wrap container, which has its own class. But apart from auto, I only set it to ‘inherit’ but this yields the same result as auto. (I guess it will inherit -> auto from the img {})

I don’t know what I’m doing wrong here, seems quite an easy question.

Read more here: width:auto overwrite inline width of image

Leave a Reply

Your email address will not be published. Required fields are marked *