CSS HACK: Cuadrado siempre!

  • por Josefina Balmaceda

Como lograr un cuadrado perfecto y responsivo, además cómo hacer que una imagen se adapte a este cuadrado.

1.Crear un cuadrado responsivo

Para crear un cuadrado solo debemos darle un alto y ancho en px en el css.

.square {
  width: 250px;
  height: 250px;
}
<div class=’square’>
</div>

El problema ocurre cuando queremos que este sea responsivo, el cuadrado se deforma

.square {
  width: 50%;
  height: 50%;
}
<div class=’square’>
</div>

La solución para que nuestro cuadrado siempre mantenga las proporciones:

.square {
  width: 50%;
  &:after {
    content: ‘’;
    display: block;
    padding-bottom: 100%;
  }
}
<div class=’square’>
</div>

Ahora, agregamos contenido a este cuadrado

.square {
  width: 50%;
  &:after {
    content: ‘’;
    display: block;
    padding-bottom: 100%;
  }
  .content {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}
<div class=’square’>
  <div class=’content’>
    <p>Hello!</p>
  </div>
</div>

2.Agregar una imagen

Para agregar una imagen a nuestro cuadrado creado anteriormente, primero debemos seleccionar la imagen e insertarla en nuestro html.

<img src=”ruta de la image”>

Luego debemos agregar nuestro imagen a la estructura de cuadrado descrita anteriormente

<div class=’square’>
  <div class=’content’>
    <img src=’rutadelaimagen’>
  </div>
</div>

Para centrar la imagen podemos usar diferentes técnicas, la que mejor me funciona a mi es esta:

OBJECT-FIT

La propiedad object-fit define como un elemento responde al alto y ancho del div que la contiene dándonos control sobre como se muestra. Puedes darle los siguientes valores:

  • Fill: Deforma la imagen para que se muestre completa dentro del div, sin cuidar las proporciones.
  • Contain: Aumenta o disminuye el tamaño de la imagen para llenar el div padre, cuidando las proporciones de la imagen.
  • Cover: La imagen mantendrá sus proporciones y probablemente cortara todo lo que no entre en el div padre.
  • None: La imagen mantendrá su tamaño original sin importar su padre.
  • Scale-down: La imagen comparará la diferencias entre contain y none para mantener el menor tamaño para ella.
.square {
  width: 50%;
  &:after {
    content: ‘’;
    display: block;
    padding-bottom: 100%;
  }
  .content {
    position: absolute;
    width: 100%;
    height: 100%;
    img {
      object-fit: cover;*
      width: 100%;
      height: 100%;
    }
  }
}

Aquí podemos ver los diferentes valores de Object-fit en acción.

POSITION OF IMG

Otra forma de centrar una imagen sin conocer su alto y ancho es usando la propiedad transform, que nos permite mover la imagen y mostrar su centro.

.square {
  width: 50%;
  &:after {
    content: ‘’;
    display: block;
    padding-bottom: 100%;
  }
  .content {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate -50%, -50%;
    }
  }
}

Ambas formas de centrar una imagen son válida, puedes ocupar la que más te acomode o tu fórmula personal.