Ширина изображения переопределена чем-то другим

Question

Недавно я переместил свой персональный сайт на github.io и использовал тему индиго Джекилла. На одной из моих страниц уценки под названием about.md у меня есть следующий тег.

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

Но это отменяется другим блоком.

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

Из-за чего изображение, которое я хочу показать на 100%, отображается только на половине страницы.

Как я переопределю.about img, чтобы показать мое изображение на 100%

Answer 1

Вы можете использовать атрибут стиля с ! Важно установить ширину изображения, как показано ниже:-

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

При этом вы также должны смотреть ширину родительского тега этого контейнера тегов

Answer 2

Ваша текущая ширина встроенного изображения использует атрибут ширины. Чтобы перезаписать CSS, вы должны использовать более конкретный CSS. Замените атрибут на CSS / стиль, например так:

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

Если вы используете выше, ваш встроенный CSS выиграет битву специфичности от .about img селектор.

Чтобы легко запомнить изображение о правилах специфики, посмотрите Speci-FISH-ity.