覆盖Wordpress（CSS）中的element.style

Question

我尝试在网站的移动版本中编辑徽标的高度。 我发现我需要将移动高度设置为50％，并且在检查时显示为100％

    @media only screen and (min-width: 1000px)
    header.centered_logo .q_logo {
    height: 50% !important;


    .q_logo {
    height: 50% !important;

    <div class="q_logo"><a href="https://rzeczownik.com/" style="height: 60px; visibility: visible;"><img class="normal" src="https://rzeczownik.com/wp-content/uploads/2015/09/rzeczownik_logo.png" alt="Logo" style="height: 100%;"><img class="light" src="https://rzeczownik.com/wp-content/uploads/2015/09/rzeczownik_logo.png" alt="Logo" style="height: 100%;"><img class="dark" src="https://rzeczownik.com/wp-content/uploads/2015/09/rzeczownik_logo.png" alt="Logo" style="height: 100%;"><img class="sticky" src="https://rzeczownik.com/wp-content/uploads/2015/09/rzeczownik_logo.png" alt="Logo" style="height: 100%;"></a></div>

我尝试编辑CSS，但是没有成功。

Answer 1

您的代码显示的媒体查询的样式将在最小宽度为1000px时应用。

您应该将其更改为“最大宽度”。而且，CSS似乎缺少一些卷曲的缺陷。

尝试一下：

@media only screen and (max-width: 1000px) {
   .q_logo a img {
       height: 50% !important;
   }
}

Answer 2

it is issue with your anchor tag, you won't be able to set the height of the image since the default display property of anchor tag is inline, you might need to change that to display:inline-block; for treating the image inside it like a block element.

Answer 3

在遵循给定的CSS之后，您必须从html“ style =” height：100％;“”中删除内联css。

@media only screen and (max-width: 1000px)
header .q_logo img.normal {
    display: block!important;
    opacity: 1!important;
    position: relative;
    max-width: 100%;
    margin: 0px;
}

<img class="normal" src="https://rzeczownik.com/wp-content/uploads/2015/09/rzeczownik_logo.png" alt="Logo" scale="0" style="">