Mantener aspecto cuadrado de imagen o elemento

2 minutos

Elemento cuadrado

Cuando queremos dar una proporción, o una relación de aspecto, de una imagen o un elemento no podemos usar CSS porque lamentablemente no todos los navegadores compatibles con el estilo aspect-ratio (hablo en plural.. pero quiero decir Safari…ejem). Debemos recurrir a un poco de JavaScript. Por ello voy a compartir una técnica para lograr que un elemento sea siempre cuadrado, independientemente de su anchura o si su padre se redimensiona. Será totalmente responsivo.

Partimos de la siguiente imagen. Como puedes comprobar es más alta que ancha.

Ejemplo cuadrado

Nuestro objetivo es el siguiente.

Siempre adaptándose al espacio disponible y conservando su proporción 1:1.

Primero damos a la imagen una clase que nos vamos a inventar: aspect-ratio-1-1.

<img class="aspect-ratio-1-1" src="https://cdn.jsdelivr.net/gh/tanrax/place-image-random/images/1.jpg">

Le indico en el CSS que quiero una anchura de 100% y recorto la imagen con object-fit.

.aspect-ratio-1-1 {
    width: 100%;
    object-fit: cover; /* Recorta la imagen sin deformarla */
    object-position: center;
}

Aquí viene el mago JavaScript que hará el arreglo.

// Variables
// Capturamos todos los elementos que tengan la clase
const aspectRatio1to1 = document.querySelectorAll('.aspect-ratio-1-1');

// Funcion para el evento
function resizeForSquareAppearance(event) {
    aspectRatio1to1.forEach((element) => {
        // Modifica la altura a partir de la anchura del elemento
        element.style.height = `${element.clientWidth}px`;
    })
}

// Evento cuando se redimensiona la ventana
window.addEventListener('resize', resizeForSquareAppearance);
// Evento cuando se carga el contenido
document.addEventListener('DOMContentLoaded', resizeForSquareAppearance);
// Fuente: https://programadorwebvalencia.com/mantener-imagen-o-elemento-cuadrado-responsive/

Ejemplo completo

Puedes probar un ejemplo listo para copiar.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <style>
        .aspect-ratio-1-1 {
            width: 100%;
            object-fit: cover;
            object-position: center;
        }
    </style>
    </head>
<body>

    <img class="aspect-ratio-1-1" src="https://cdn.jsdelivr.net/gh/tanrax/place-image-random/images/1.jpg">

    <script>
        const aspectRatio1to1 = document.querySelectorAll('.aspect-ratio-1-1');

        function resizeForSquareAppearance(event) {
            aspectRatio1to1.forEach((element) => {
                element.style.height = `${element.clientWidth}px`;
            })
        }

        window.addEventListener('resize', resizeForSquareAppearance);
        document.addEventListener('DOMContentLoaded', resizeForSquareAppearance);
        // Fuente: https://programadorwebvalencia.com/mantener-imagen-o-elemento-cuadrado-responsive/
    </script>
</body>
</html>

Con comentarios en inglés

Si necesitas incluirlo en algún proyecto serio, te dejo algunos comentarios en inglés.

HTML

<img class="aspect-ratio-1-1" src="https://cdn.jsdelivr.net/gh/tanrax/place-image-random/images/1.jpg">

CSS

.aspect-ratio-1-1 {
    width: 100%;
    object-fit: cover; /* Crop the image so as not to distort it */
    object-position: center;
}

JavaScript

// Variables
const aspectRatio1to1 = document.querySelectorAll('.aspect-ratio-1-1');

/**
 * Modifies the height from the width
 * source: https://programadorwebvalencia.com/mantener-imagen-o-elemento-cuadrado-responsive/
 * @param event
 */
function resizeForSquareAppearance(event) {
    aspectRatio1to1.forEach((element) => {
        // Modifies the height depending on the width.
        element.style.height = `${element.clientWidth}px`;
    })
}

// Change the height when resized
window.addEventListener('resize', resizeForSquareAppearance);
// Change the height when the page loads
document.addEventListener('DOMContentLoaded', resizeForSquareAppearance);

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

Donación con recompensa

  • 1 café: Respondo a tu duda en los comentarios.
  • 2 cafés: Respondo en menos de 24h a tu comentario.
  • 3 cafés: Todo lo anterior y además te doy las gracias en mis redes.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...