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

Question

I am currently developing a blogging platform with special features other than the usual ones. But I run into a 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 if users were adding their images to the page.

BUT! some images are smaller and do not look beautiful when they are stretched to 80% of the page width.

So, I give them for each image they add, indicate, if they want, the HTML code for each image (automatically made using tinymce)

So. When they add an image, html looks like this:

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

But when they want to set the size manually, the img tag will become (tinymce):

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

But. Image is still 80% of the page width! Is it possible to allow img width to css image width?

Thanks for your time, Matthias.

Answer 1

Try adding !important to inline CSS. This should make the new size overload certain CSS.

For instance:

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

Answer 2

To override all css, including the inline style and css style, do the following:

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

* overide all css globally;)

Answer 3

You are right, element styles override any other specified styles. CSS operates on so-called specificity rules, where the most specific rule overrides any less defined rule properties.

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

http://jsfiddle.net/n2VCk/

Answer 4

I believe that I have the same problem as the OP. I use the TinyMCE 3.5.8 editor, and when the user uses the editor to insert photos with specific sizes using the "advimage" plugin, the size of the photo is determined using HTML attributes (height="100" width="100") as opposed to the CSS style (height:100px; width:100px;) .

This is a known issue with the TinyMCE error report here .

The only way I found that this works somewhat for resizing images is to add the “px” suffix to the end of the HTML attributes by going to image.js (in my setup it is 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", 

A dirty pen, I know, but it seems to work for me.

Answer 5

Try using the maximum width: 80% instead of the width: 80% and height: automatically this way the image will only change if it has more free space and the height will always be proportional.

Answer 6

 .blogBody img { height:inherit; }