CODEWITHSUNDEEP
csstailwind-css
Teretto
Teretto

Reputation: 655

Tailwind makes images square

I try to place photos with a grid so that they look like squares. 

<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>

How can I make images look like squares using tailwind? Yes, I can use object-fit: cover;, but I need to hard set width and height for this.

Upvotes: 5

Views: 13988

Answers (3)

Julian Rubisch
Julian Rubisch

Reputation: 567

Something like this should work:

<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>

didn't fully test it in isolation, copied it from a codebase of mine...

Upvotes: 3

parsecer
parsecer

Reputation: 5106

I just added custom style to the needed class:

 width: 50vw;
 height: 50vw;

Perhaps you could create a custom Tailwind class with those styles.

Upvotes: 1

dougajmcdonald
dougajmcdonald

Reputation: 20047

You can either use the tailwind w-x and h-y utility classes to hard set widths and heights on the images, or if the x and y values you want don't exist, extend your tailwind config file to include them, then use those.

For heights that don't exist, just extend your config like this:

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)",
  }),
},

Or you can do the same thing with simple %'s

You can use any of the tailwind fixed or fluid width classes, in your comment you mention wanting responsive behaviour, so have a look at the fluid width utilities or extend them if you need something specific.

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

Upvotes: 0

Related Questions