image width overridden by something else

Question

Recently I moved my personal website to github.io and used jekyll's indigo theme. In one of my markdown page called about.md, I have the following tag.

<img src="../figs/foo.jpg" width="100%">

But this is overridden by another block.

.about img {
    width: 50%;
    margin: 0 auto;
    display: block;
 }

Because of which, the image I want to show for 100% is only displayed half of the page.

How will I override the .about img to show my image for 100%

Answer 1

Your current inline image width uses the width attribute. To overwrite the CSS you should use more specific CSS. Replace the attribute by CSS/style, like this:

<img src="../figs/foo.jpg" style="width: 100%;" />

If you use the above, your inline CSS will win the specificity battle from the .about img selector.

For an easy to remember image about the specificity rules, look at Speci-FISH-ity.

Answer 2

You can use the style attribute with !important to set the image width as below :-

<img src="../figs/foo.jpg" style="width:100% !important;">

With this you should also look the width of the parent tag of this tag container