html - 图像宽度被其他东西覆盖

Question

最近我把我的个人网站搬到了 github.io 并使用了 jekyll 的 indigo 主题。在我的一个名为 about.md 的降价页面中，我有以下标签。

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

但这被另一个块覆盖。

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

因此，我想要 100% 显示的图像只显示了页面的一半。

我将如何覆盖 .about img 以 100% 显示我的图像

score 1 · Accepted Answer

您可以使用带有!important的样式属性来设置图像宽度，如下所示：-

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

有了这个，您还应该查看此标签容器的父标签的宽度

score 0 · Accepted Answer

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

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

如果您使用上述方法，您的内联 CSS 将赢得.about img选择器的特异性之战。

有关特异性规则的易于记忆的图像，请查看Speci-FISH-ity。

2 回答 2