is it possible to override css height and width of image, with image (html) height & width tag?

Question

I am currently developing a blog platform with som special features than the ordinary ones. But i run into problem when i try to set the image size.

I have a file with the following css:

.blogBody img
{
        display: block;
    margin-left: auto;
    margin-right: auto;
    width:80%;
    height:auto;
    }

This works as it should when users add their images to the page.

BUT! some images are smaller and doesnt look nice when it is stretched to the size of 80 percent of the page width.

So therefore i let them for each image they add, specify, if they want, HTML code for each image (automatically done with tinymce)

So. When they add an image the html is the following:

<img src="....." />

But when they want to set the size manually the img tag becomes (tinymce):

<img src="......" width="..." height="...." />

But. The image is still 80% of the page width! Is it possible to let the img width override the css image width?

Thanks for your time Mattias.

Answer 1

Try adding !important to the inline CSS. That should force the new size to over-ride the defined CSS.

For example:

<img src="......" style="width:50px !important;height:45px !important;" />