如何使用tailwindcss固定图像？

Question

我在使用 Tailwind CSS 时在 React 应用程序中遇到问题。当尝试修复图像时，它意外地占据了屏幕的整个宽度。此外，由于固定属性，类为“col span-1”的 div 出现在其后面。有 React 和 Tailwind CSS 经验的人可以帮我解决这个问题吗？任何见解将不胜感激！

<div className="h-[100vh]">
        <div className="lg:grid grid-cols-3 w-full h-full">
          <div className="col-span-2 h-full  lg:block hidden top-0 bg-gray-500  ">
            {" "}
            <div
              className="h-full bg-cover bg-center  top-0  left-0 bottom-0"
              style={{ backgroundImage: `url(${img})` }}
            ></div>
          </div>

          <div id="content-wraper" className="col-span-1 bg-white h-full    ">
            <div className="left-0 boor">salut</div>
            <div className="flex items-center justify-center">
              <div id="main-content" className=" max-w-sm h-full ">
                <div className=" flex items-center justify-center p-10">
                  <img
                    src={logo}
                    className="block btn- h-[50px]  w-auto "
                    alt=""
                  />
                </div>
                <div>
                  <h6 className="text-gray-800 font-semibold text-2xl mb-5 text-center ">
                    {" "}
                    Connexion
                  </h6>
                </div>
                <div className="mb-5">
                  {" "}
                  <IndexPage />
                  <Separator text="ou" />
                  <Boutton />
                </div>
                <div className="mb-5">
                  <p className=" font-light text-gray-400 text-center text-xs">
                    En continuant, vous acceptez les{" "}
                    <a className="font-medium ">Conditions d'Utilisation</a> et
                    la{" "}
                    <a className="font-medium ">
                      Politique de Confidentialité{" "}
                    </a>{" "}
                    de la société .
                  </p>
                </div>
                <div className=" flex flex-col justify-center items-center text-sm">
                  <p className="font-medium text-gray-800 ">
                    Vous n'êtes pas encore inscrit ?
                  </p>
                  <a
                    href="/auth/sign-up/default"
                    className=" font-medium text-yellow-500 "
                  >
                    Créer un compte
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>

Answer 1

默认情况下，背景图像的

div

具有

width: auto

，这意味着它将扩展以填充其内容。相反，您希望通过设置

w-full

将其宽度限制为其父级的宽度，这设置了

width: 100%

来确保此限制。