图片宽度被其他内容覆盖

Question

最近，我将个人网站移至github.io，并使用jekyll的靛蓝主题。在我的markdown页面之一中，名为about.md，我有以下标记。

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

但这被另一个块覆盖。

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

因此，我要显示为100％的图像仅显示在页面的一半。

我将如何覆盖.about img以显示100％的图片

Answer 1

您可以将style属性与！important 一起使用，如下所示设置图像宽度：-

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

与此同时，您还应该查看此标签容器的父标签的宽度

Answer 2

您当前的嵌入式图像宽度使用宽度属性。要覆盖CSS，您应该使用更具体的CSS 。用CSS / style替换属性，如下所示：

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

如果使用上述选项，则内联CSS将从.about img选择器中赢得特异性战。

要轻松记住有关特异性规则的图像，请查看Speci-FISH-ity。