Ajuste de objeto CSS Tailwind

Esta clase acepta más de un valor en Tailwind CSS. Todas las propiedades están cubiertas como en forma de clase. Es la alternativa a la propiedad CSS object-fit . Esta clase se usa para especificar cómo se debe cambiar el tamaño de una imagen o video para que se ajuste a su cuadro de contenido para controlar el cambio de tamaño del contenido de un elemento reemplazado.

Clases de ajuste de objetos:

  • objeto-contener 
  • cubierta de objeto 
  • relleno de objetos 
  • objeto-ninguno 
  • reducción de escala de objetos

object-contain: esta clase de imagen reemplazada conserva la relación de aspecto de la imagen original mientras se ajusta dentro del cuadro de contenido. Cambiar el tamaño del contenido de un elemento para permanecer dentro de su contenedor.

Sintaxis:

<element class="object-contain">...</element>

Ejemplo 1:

HTML

<!DOCTYPE html> 
<head>    
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
     rel="stylesheet"> 
</head> 
  
<body class="text-center"> 
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS object Class</b> 
    <div class="bg-green-300 w-full h-full">
    <img class="object-contain h-48 w-full" 
         src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">    
  
</center>
</body> 
  
</html>

Producción:

object-cover: esta clase conserva la relación de aspecto de la imagen original como la imagen reemplazada mientras se ajusta al cuadro de contenido. A veces se recorta para ajustarse cuando la relación de aspecto de la imagen original no coincide con la relación de aspecto del cuadro de contenido. Cambia el tamaño del contenido de un elemento para cubrir su contenedor usando esta clase.

Sintaxis:

<element class="object-cover">...</element>

Ejemplo 2:

HTML

<!DOCTYPE html> 
<head>     
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
    rel="stylesheet"> 
</head> 
  
<body class="text-center"> 
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS object Class</b> 
    <div class="bg-green-300 w-full h-full">
    <img class="object-cover h-48 w-full" 
         src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">    
  
</center>
</body> 
  
</html>

Producción:

relleno de objeto: la imagen reemplazada de esta clase se estira para ajustarse al cuadro de contenido. La imagen reemplazada llenará completamente el cuadro sin necesidad de su relación de aspecto. Estire el contenido de un elemento para que se ajuste a su contenedor usando la clase.

Sintaxis:

<element class="object-fill">...</element>

Ejemplo 3:

HTML

<!DOCTYPE html> 
<head>    
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
    rel="stylesheet"> 
</head> 
  
<body class="text-center"> 
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS object Class</b> 
    <div class="bg-green-300 w-full h-full">
    <img class="object-fill h-48 w-full" 
         src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">    
  
</center>
</body> 
  
</html>

Producción:

object-none: en esta clase, la imagen reemplazada ignorará la relación de aspecto de la imagen original. Por lo tanto, no se redimensiona. La clase muestra el contenido de un elemento en su tamaño original ignorando el tamaño del contenedor.

Sintaxis:

<element class="object-none">...</element>

Ejemplo 4:

HTML

<!DOCTYPE html> 
<head>    
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 
  
<body class="text-center"> 
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS object Class</b> 
    <div class="bg-green-300 w-full h-full">
    <img class="object-none h-48 w-full" 
         src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">    
  
</center>
</body> 
  
</html>

Producción:

object-scale-down: esta clase de imagen reemplazada se redimensiona como si no se especificara none o contains y da como resultado el tamaño de objeto más pequeño. La clase muestra el contenido de un elemento en su tamaño original, pero lo reduce para que se ajuste a su contenedor.

Sintaxis:

<element class="object-scale-down">...</element>

Ejemplo 5:

HTML

<!DOCTYPE html> 
<head>    
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 
  
<body class="text-center"> 
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS object Class</b> 
    <div class="bg-green-300 w-full h-full">
    <img class="object-scale-down h-48 w-full" 
         src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
    
</center>
</body> 
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *