2
votes

Tailwind rend les images carrées

J'essaye de placer les photos avec une grille pour qu'elles ressemblent à des carrés.

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />

<div class="container my-12 mx-auto">
  <div class="flex flex-wrap -mx-2">
    <div class="w-1/3 px-2 my-2">
      <div class="bg-gray-400">
        <img class="" src="https://lh3.googleusercontent.com/proxy/XTJmiQ_8JSKjnjQHij4OKDLe_achY1O7fUqOR2a-V27JZJxVBnNIfMcl5T_H0xeF7Jfd29u81QaofpZewSst1WhP40eCn-eh-KUjPfXczI162XUrWByvyR-qESrUoJshXQ" alt="">
      </div>
    </div>
    <div class="w-1/3 px-2 my-2">
      <div class="bg-gray-500">2</div>
    </div>
    <div class="w-1/3 px-2 my-2">
      <div class="bg-gray-400">3</div>
    </div>
    <div class="w-1/3 px-2 my-2">
      <div class="bg-gray-400">4</div>
    </div>
    <div class="w-1/3 px-2 my-2">
      <div class="bg-gray-500">5</div>
    </div>
    <div class="w-1/3 px-2 my-2">
      <div class="bg-gray-400">6</div>
    </div>
  </div>
</div>

Comment puis-je faire ressembler les images à des carrés en utilisant le vent arrière? Oui, je peux utiliser object-fit: cover; , mais j'ai besoin de définir la largeur et la hauteur pour cela.

css tailwind-css

1 commentaires

L'avez-vous résolu? Comment?

3 Réponses :

0
votes

Vous pouvez soit utiliser les classes d'utilitaires tailwind wx et hy pour définir des largeurs et des hauteurs fixes sur les images, soit si les valeurs x et y vous voulez n'existent pas, étendre votre fichier de configuration tailwind pour les inclure, puis les utiliser.

Pour des hauteurs qui n'existent pas, étendez simplement votre configuration comme ceci:

theme: {
// ðŸ‘‡ this makes Tailwind merge the configuration w/o overriding it.
extend: {
  height: theme => ({
    "screen/2": "50vh",
    "screen/3": "calc(100vh / 3)",
    "screen/4": "calc(100vh / 4)",
    "screen/5": "calc(100vh / 5)",
  }),
},

Ou vous pouvez faire la même chose avec de simples%

Vous pouvez utiliser n'importe laquelle des classes de largeur fixe ou fluide de vent arrière.Dans votre commentaire, vous mentionnez le fait de vouloir un comportement réactif, alors jetez un œil aux utilitaires de largeur fluide ou étendez-les si vous avez besoin de quelque chose de spécifique.

https://tailwindcss.com/docs/width/#fluid-width

5 commentaires

mais comment cela peut-il être réactif, si je fixe la largeur et la hauteur?

Si vous voulez qu'il soit réactif, définissez les largeurs et les hauteurs sur une fraction ou un pourcentage. Utilisez donc l'une des largeurs de fluide telles que 1/5 pour 20% (tout cela est dans les documents de vent arrière sous largeur)

@dougajmcdonald, vous pouvez définir les largeurs en pourcentage, mais vous ne pouvez pas définir les hauteurs en pourcentage.

Comme je l'ai dit dans la réponse "si les valeurs souhaitées n'existent pas, étendez votre fichier de configuration tailwind pour les inclure"

Vous utilisez calc(100vh mais vh dépend de la hauteur? Donc si width est défini w-3/4 signifiant vw/3 , alors la hauteur étant hv/3 serait une longueur différente et donc pas un carré?

1
votes

Je viens d'ajouter un style personnalisé à la classe nécessaire:

 width: 50vw;
 height: 50vw;

Vous pourriez peut-être créer une classe Tailwind personnalisée avec ces styles.

0 commentaires

0
votes

Quelque chose comme ça devrait fonctionner:

<ul class="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 w-screen h-screen">
  <li class="col-span-1 flex flex-col text-center bg-white">
    <div class="pb-full relative">
      <div class="absolute inset-0 h-full w-full">
        <img class="h-full w-full object-cover object-center" src="https://unsplash.it/400/400" />
      </div>
    </div>
  </li>
</ul>

Je ne l'ai pas entièrement testé isolément, je l'ai copié à partir d'une de mes bases de code ...

0 commentaires