【HTML/CSS/Django】imgのCSS（サイズ）が反映されない

Question

こんにちは。
Djangoでwebアプリを作成しており、そのレイアウト部分で悩んでいます。
よろしければお力を貸していただけないでしょうか？

前提・実現したいこと

HTMLファイルにlogoのイメージを作成しており、そのサイズを変更したい。

発生している問題・エラーメッセージ

なし

該当のソースコード

    <header>
        <a href="{% url 'index' %}"><img src="{% static 'img/logo.svg' %}" alt="logo" class="c_logo"></a>
    </header>

header{
    background-color: beige;
}

img.c_logo{
    width: 10%;
}

試したこと

imgの部分をdiv classで囲ったり、上記にあるようにimg自体にclassを持たせたりしたのですが、サイズ変更できませんでした。

    <header>
        <div class="logo_img">
            <a href="{% url 'index' %}"><img src="{% static 'img/logo.svg' %}" alt="logo"></a>
        </div>
    </header>

header{
    background-color: beige;
}

.logo_img{
    width: 10%;
}

補足情報（FW/ツールのバージョンなど）

HTML5
CSS3

Comments

[miyabi_pudding]

10%は、どこのサイズに対しての比率にしたいのでしょうか？
ページ横幅ですか？

Answer 1

%では、親要素に対しての比率となってしまいます。
ページ横幅に対しての比率ならば、vwを使うといいでしょう。

.logo_img {
  height: auto; /* 縦をautoでナリにすることで、画像のアスペクト比を維持しやすい */
  width: 10vw;
}

Comments

[退会済みユーザー]

ご回答ありがとうございます。
返信が遅くなってしまい、申し訳ございません。

おっしゃる通り、ページ横幅に対して実行したいと考えていました。

また、問題解決しました。
ありがとうございます。
すごく助かりました。

%では親要素に対してというのも勉強になりました。