Tailwind CSS表单图片溢出容器问题求助

尝试在联系表单中添加一张图片，使其与容器内其他内容等高，但当前代码实现下图片垂直拉伸并溢出容器，无法正常适配。尝试了overflow相关属性但无效，也在Tailwind CSS配置中添加了@tailwindcss/forms插件，仍未解决问题。

编辑说明：第一张图是预期效果，第二张是实际效果

<section>
  <div className="h-screen items-center flex justify-center">
    <form className="bg-white flex rounded-lg w-1/2 font-burtons">
      <div className="flex-1 text-gray-700 p-20">
        <h1 className="text-3xl pb-2 text-teal-600 font-burtons">
          Let's get started 👋
        </h1>
        <p className="text-lg text-gray-500">
          Join our E-learning platform today and unlock over 500+ courses
          and digital assets ready to download.
        </p>
        <div className="mt-6 ">
          {/* Name input field */}
          <div className="pb-4">
            <label className='block font-burtons text-sm pb-2' htmlFor="name"></label>
            <input
              className="border-2 border-gray-500 p-2 rounded-md w-1/2 focus:border-teal-500 focus:ring-teal-500 "
              type="text"
              name="name"
              placeholder="Enter your name"
            />
          </div>
          {/* Email input field */}
          <div className="pb-4">
            <label className=" block font-burtons text-sm pb-2" htmlFor='email'></label>
            <input
              className="border-2 border-gray-500 p-2 rounded-md w-1/2 focus:border-teal-500 focus:ring-teal-500"
              type="email"
              name="email"
              placeholder="Enter your email address"
            />
          </div>
          {/* Country input field */}
          <div className="pb-4">
            <label className="block font-burtons text-sm pb-2" htmlFor='country'></label>
            <select
              className="border-2 border-gray-500 p-2 rounded-md w-1/2 focus:border-teal-500 focus:ring-teal-500"
              name="country"
            >
              <option>United States</option>
              <option>United Kingdom</option>
              <option>Germany</option>
            </select>
          </div>
          {/* Terms of service*/}
          <div className="pb-4">
            <label className='block font-burtons text-sm pb-2' htmlFor='terms'></label>
            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                name="terms"
                value="checked"
                className="h-5 w-5 text-teal-500 border-2 background-gray-500 focus:border-teal-500 focus:ring-teal-500"
              />
              <p className="text-sm font-burtons gray-500">
                I agree to the Terms and Service
              </p>
            </div>
          </div>
          <button
            type="submit"
            className="bg-teal-500 font-burtons text-sm text-white py-3 mt-6 rounded-lg w-full"
          >
            Start learning today!
          </button>
        </div>
      </div>
      <div className='flex-1 relative'>
        <Image src={formImage} fill className='object-cover overflow-auto' />
      </div>
    </form>
  </div>
</section>
</main>

问题核心是图片容器的高度未被正确约束，且未处理圆角裁切，以下是具体修改方案：

1. 给表单容器添加裁切属性：给form的className添加overflow-hidden，确保图片不会超出表单的圆角范围。
2. 约束图片容器高度：给图片的父容器（flex-1 relative）添加h-full，让它继承表单的高度，与左侧内容保持等高。
3. 调整Image组件属性：移除Image的overflow-auto（该属性作用于容器而非图片），保留object-cover保证图片按比例填充容器。

修改后的完整代码：

<section>
  <div className="h-screen items-center flex justify-center">
    <form className="bg-white flex rounded-lg w-1/2 font-burtons overflow-hidden">
      <div className="flex-1 text-gray-700 p-20">
        <h1 className="text-3xl pb-2 text-teal-600 font-burtons">
          Let's get started 👋
        </h1>
        <p className="text-lg text-gray-500">
          Join our E-learning platform today and unlock over 500+ courses
          and digital assets ready to download.
        </p>
        <div className="mt-6 ">
          {/* Name input field */}
          <div className="pb-4">
            <label className='block font-burtons text-sm pb-2' htmlFor="name"></label>
            <input
              className="border-2 border-gray-500 p-2 rounded-md w-1/2 focus:border-teal-500 focus:ring-teal-500 "
              type="text"
              name="name"
              placeholder="Enter your name"
            />
          </div>
          {/* Email input field */}
          <div className="pb-4">
            <label className=" block font-burtons text-sm pb-2" htmlFor='email'></label>
            <input
              className="border-2 border-gray-500 p-2 rounded-md w-1/2 focus:border-teal-500 focus:ring-teal-500"
              type="email"
              name="email"
              placeholder="Enter your email address"
            />
          </div>
          {/* Country input field */}
          <div className="pb-4">
            <label className="block font-burtons text-sm pb-2" htmlFor='country'></label>
            <select
              className="border-2 border-gray-500 p-2 rounded-md w-1/2 focus:border-teal-500 focus:ring-teal-500"
              name="country"
            >
              <option>United States</option>
              <option>United Kingdom</option>
              <option>Germany</option>
            </select>
          </div>
          {/* Terms of service*/}
          <div className="pb-4">
            <label className='block font-burtons text-sm pb-2' htmlFor='terms'></label>
            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                name="terms"
                value="checked"
                className="h-5 w-5 text-teal-500 border-2 background-gray-500 focus:border-teal-500 focus:ring-teal-500"
              />
              <p className="text-sm font-burtons gray-500">
                I agree to the Terms and Service
              </p>
            </div>
          </div>
          <button
            type="submit"
            className="bg-teal-500 font-burtons text-sm text-white py-3 mt-6 rounded-lg w-full"
          >
            Start learning today!
          </button>
        </div>
      </div>
      <div className='flex-1 relative h-full'>
        <Image src={formImage} fill className='object-cover' />
      </div>
    </form>
  </div>
</section>
</main>

关键修改说明 #

• form添加overflow-hidden：解决图片超出表单圆角的问题。
• 图片父容器添加h-full：确保图片容器高度与左侧内容区域一致，避免垂直拉伸溢出。
• Image移除overflow-auto：该属性对图片元素无效，应将溢出控制放在容器上。

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