[Q&A] アイコンのサイズがウィンドウ幅によって変わってしまう

アイコンのサイズがウィンドウ幅によって変わってしまう

解決したいこと

アイコンとロゴのサイズを固定したい

例）
ウィンドウ幅が変わるとナビゲーションバーの画像サイズが変わってしまいます。
tailwaindを使用していますが、画像サイズに関しては何も設定していないと思います。

発生している問題・エラー

該当するソースコード

<div class="items-center justify-between flex px-12 py-6 h-20">
        <div class="w-44">
          <img src="../src/img/icon/logo_transparent.png" alt="logo-img" />
        </div>

        <div>
          <ul class="flex text-white">
            <li class="ml-5 px-2 py-1"><a href="">Portfolio</a></li>
            <li class="ml-5 px-2 py-1"><a href="">Connect Us</a></li>
            <li class="ml-5 px-2 py-1">
              <div class="flex items-center">
                <div class="mr-1">
                  <img
                    src="../src/img/icon/fi-br-envelope.png"
                    alt="logo-img"
                    class="opacity-50"
                    width="25px"
                    height="25px"
                  />
                </div>
                <div>
                  <a href="">contact</a>
                </div>
              </div>
            </li>
            <li class="ml-5 px-2 py-1"><a href="">Projects</a></li>
          </ul>
        </div>
      </div>

例）

def greet
  puts Hello World
end

自分で試したこと

img要素のwidthとheightを設定したけどダメでした。

3Answer

@udagawah1015 posted at 2021-10-04

’flex-none’で自己解決しました。

@MOzumi posted at 2021-09-28

min-widthは試してみましたか？

Comments

@udagawah1015
Questioner
ありがとうございます。
サイズは固定できたのですが、今度は右側になぜ余白ができてしまいました。

@udagawah1015 posted at 2021-09-28

imgのラッパーにmin-width: 100%を設定すると余白ができてしまいました。

            //classの"min-w-full"はtailwindでのmin-width: 100%
            <div class="mr-1 min-w-full">
              <img
                src="../src/img/icon/fi-br-megaphone.png"
                alt="logo-img"
                class="opacity-50 cursor-pointer"
                width="25px"
                height="25px"
              />
            </div>