how to overwrite css that is included in the css

Question

I have code in a complex webapp - that is creating code like so

<img src="foobar.png" style="width:369px;height:200px;">

how can I insert css (via a .css file include) to overwrite width and height ?

thanks

Answer 1

You can override this image style like below method

img[style]{
        height:100px !important;
        width:200px !important;
    }

<img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg" style="width:369px;height:200px">

Answer 2

used to !important and define a class in your img tag as like this

.imgClass{
width:400px !important;
height:400px !important
}

Answer 3

Force it with CSS using the !important method which overrides everything:

Check this fiddle

img {
  width: 500px !important;
  height: 500px !important;
}

Answer 4

You should just add the !important to your style like so.

img {
    height: 200px !important;
    width: 369px !important;
}

And then i would allways suggest you not to do inline style.