Ajuste de objeto em CSS Tailwind
Tailwind Object Fit é um recurso fácil de usar que permite controlar de maneira fácil e eficiente o tamanho e a posição de imagens e vídeos em seus sites.
Neste artigo, veremos mais de perto o Tailwind Object Fit e como você pode usá-lo para aprimorar o design e a funcionalidade do seu site.
O que é ajuste de objeto Tailwind?
Tailwind Object Fit é uma propriedade CSS que controla como uma imagem é redimensionada e exibida em seu contêiner.
Ele é usado para garantir que as imagens sejam exibidas de forma correta e responsiva em diferentes tamanhos de tela e dispositivos.
A propriedade de ajuste do objeto Tailwind é usada para definir como a imagem deve caber em seu contêiner, e a propriedade de posição do objeto é usada para definir onde a imagem deve ser posicionada em seu contêiner.
Classes de ajuste de objeto Tailwind
| Aulas | Visão geral |
| objeto-contém | O conteúdo do elemento é dimensionado de forma a manter sua proporção enquanto também se ajusta à caixa de conteúdo do contêiner. |
| capa de objeto | Essa classe dimensiona o conteúdo do elemento para cobrir toda a caixa de conteúdo do contêiner enquanto mantém a proporção. |
| preenchimento de objeto | A classe de preenchimento de objeto estende o conteúdo do elemento para preencher toda a caixa de conteúdo do contêiner, o que pode fazer com que o conteúdo perca sua proporção. |
| objeto-nenhum | Esta classe exibe o conteúdo do elemento em seu tamanho original, independentemente do tamanho do contêiner |
| escala de objetos | Nesse caso, o conteúdo do elemento é dimensionado para caber na caixa de conteúdo do contêiner, mantendo sua proporção. |
Como usar o Tailwind Object Fit?
Usar o Tailwind Object Fit é fácil e requer apenas algumas linhas de código.
Primeiro, você precisa definir o contêiner para sua imagem e adicionar as classes Tailwind apropriadas.
Você pode usar as classes w e h para definir a largura e a altura do contêiner e a classe oculta por estouro para garantir que a imagem não transborde o contêiner.
Em seguida, você precisa adicionar as classes de ajuste de objeto e posição de objeto ao elemento de imagem.
A classe object-fit define como a imagem deve caber em seu contêiner, e a classe object-position define onde a imagem deve ser posicionada dentro de seu contêiner.
Role para baixo para ver todos os casos de uso de classes com exemplo.
Object-Contain
Usando essa classe, o conteúdo do elemento é dimensionado para manter sua proporção enquanto se ajusta à caixa de conteúdo do contêiner.
Isso significa que todo o conteúdo do elemento é visível, mas pode haver algum espaço vazio no contêiner se a proporção do elemento não corresponder à do contêiner.
Sintaxe
<element class="object-contain">...</element>
Para ilustrar a classe object-contain, vamos considerar o exemplo abaixo:
Example:
Capa de objetos
Sintaxe:
<element class="object-cover">...</element>
Example:
Preenchimento de objeto
Sintaxe
<element class="object-fill">...</element>
Example:
Objeto Nenhum
Sintaxe
<element class="object-none">...</element>
Example:
Redução de objetos
Sintaxe
<element class="object-scale-down">...</element>
Example:
Isso garante que seu site seja acessível e visível para o público mais amplo possível.
