使用Tailwind CSS构建导航栏时图片变形问题求助

需求与实现方式 #

• 需求：创建国旗、登录按钮与注册按钮
• 实现：使用class="flex"的容器包裹国旗图片和按钮

问题描述 #

添加按钮后，国旗图片出现变形，无法保持设置的30px×20px尺寸。

效果对比 #

• 预期效果：国旗图片保持正常比例，与按钮在Flex容器中垂直居中对齐
• 实际效果：国旗图片被拉伸变形，尺寸不符合设置值

相关代码片段 #

<div class="flex">
  <img
    src="./img/indianFlag.png"
    alt="IndianFlag"
    width="30px"
    height="20px"/>
  <button
    class="py-3 px-5 font-mullish text-white border-lightBlue border-2 rounded-md">
    Log in
  </button>
</div>

完整导航栏代码 #

<nav class="bg-deepBlue">
  <div
    class="relative w-[1080px] mx-auto flex items-center justify-between"
  >
    <!-- logo -->
    <a href="#" class="cursor-pointer py-7 pr-7">
      <img
        src="./img/razorpayLogo.png"
        alt="RazorpayLogo"
        width="125px"
        height="30px"
      />
    </a>
    <ul class="flex gap-x-6">
      <li
        class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
      >
        <a href="#">Payments</a>
        <div
          class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
        ></div>
      </li>
      <li
        class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
      >
        <a href="#">Banking</a>
        <div
          class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
        ></div>
      </li>
      <li
        class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
      >
        <a href="#">Line of Credit</a>
      </li>
      <li
        class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
      >
        <a href="#">Payroll</a>
      </li>
      <li
        class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
      >
        <a href="#">Resources</a>
        <div
          class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
        ></div>
      </li>
      <li
        class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
      >
        <a href="#">Support</a>
        <div
          class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
        ></div>
      </li>
      <li
        class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
      >
        <a href="#">Pricing</a>
      </li>
    </ul>
    <div class="flex">
      <img
        src="./img/indianFlag.png"
        alt="IndianFlag"
        width="30px"
        height="20px"
      />
      <button
        class="py-3 px-5 font-mullish text-white border-lightBlue border-2 rounded-md"
      >
        Log in
      </button>
    </div>
  </div>
</nav>

方法1：给图片添加object-contain并让Flex容器垂直居中 #

原问题中Flex容器没有设置垂直对齐，按钮的内边距撑开容器高度后，图片默认会拉伸填充高度。添加items-center让元素垂直居中，object-contain确保图片保持原有比例：

<div class="flex items-center">
  <img
    src="./img/indianFlag.png"
    alt="IndianFlag"
    width="30"
    height="20"
    class="object-contain"
  />
  <button
    class="py-3 px-5 font-mullish text-white border-lightBlue border-2 rounded-md ml-3"
  >
    Log in
  </button>
</div>

方法2：用固定尺寸容器包裹图片 #

给图片套一个固定尺寸的容器，彻底隔离Flex布局对图片的影响：

<div class="flex items-center">
  <div class="w-[30px] h-[20px]">
    <img
      src="./img/indianFlag.png"
      alt="IndianFlag"
      class="w-full h-full object-contain"
    />
  </div>
  <button
    class="py-3 px-5 font-mullish text-white border-lightBlue border-2 rounded-md ml-3"
  >
    Log in
  </button>
</div>

方法3：改用Tailwind类控制图片尺寸 #

直接用Tailwind的尺寸类替代原生width/height属性，配合object-contain保证比例：

<div class="flex items-center">
  <img
    src="./img/indianFlag.png"
    alt="IndianFlag"
    class="w-[30px] h-[20px] object-contain"
  />
  <button
    class="py-3 px-5 font-mullish text-white border-lightBlue border-2 rounded-md ml-3"
  >
    Log in
  </button>
</div>

内容的提问来源于stack exchange，提问作者Thirumal isireddy