Попутный ветер делает изображения квадратными - PullRequest
Новая
       6

Попутный ветер делает изображения квадратными

1 голос
/ 15 апреля 2020

Я стараюсь размещать фотографии с сеткой, чтобы они выглядели как квадраты. 

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

Как я могу сделать изображения похожими на квадраты с помощью попутного ветра? Да, я могу использовать object-fit: cover;, но мне нужно жестко установить ширину и высоту для этого.

1 Ответ

0 голосов
/ 15 апреля 2020

Вы можете использовать служебные классы попутного ветра w-x и h-y, чтобы жестко установить ширину и высоту изображений, или , если нужные значения x и y не существуют, расширить ваш файл конфигурации попутного ветра, чтобы включить их, а затем использовать их.

Для высот, которые не существуют, просто расширьте вашу конфигурацию следующим образом: 

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

Или вы можете сделать То же самое с простыми% s

Вы можете использовать любой из классов с фиксированной или изменяемой шириной попутного ветра, в своем комментарии вы упомянули, что хотите адаптивного поведения, поэтому посмотрите утилиты для определения ширины потока или расширьте их, если вам нужно что-то конкретное c.

https://tailwindcss.com/docs/width/#fluid - ширина

...