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;" />

Answer 2

For overide all css, including inline style and css element style, do this:

* {
    max-width:100% !important;
    height:auto !important;
}

The * overide all css globally ;)

Answer 3

I believe that I have the same problem as the OP. I am using the editor TinyMCE 3.5.8 and when a user uses the editor to insert a photo with certain dimensions, using the 'advimage' plugin, the photo is sized using the HTML attributes (height="100" width="100") as opposed to CSS style (height:100px; width:100px;) .

This is a known issue with TinyMCE bug report here .

The only way that I have found to make this somewhat work for resizing images is to add the "px" suffix to the end of the HTML attributes by going into the image.js (in my setup, its found in /path/to/tinymce/plugins/advimage/js/image.js and edit:

tinymce.extend(args, {
        src : nl.src.value.replace(/ /g, '%20'),
        width : nl.width.value + "px", 
        height : nl.height.value + "px",

Dirty hack, I know, but it seems to work for me.

Answer 4

You are correct, element styles override any other specified styles. CSS operates on what is known as specificality rules, where the most specific rule overrides any less specific rule's properties.

An element rule does not get more specific. Double check your markup.

http://jsfiddle.net/n2VCk/

Answer 5

尝试使用max-width：80％而不是width：80％和height：auto，只有当它大于可用空间时才会调整图像大小，并且高度始终是成比例的。

Answer 6

.blogBody img
{
    height:inherit;
}