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.
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);
¡Actualización! 2022
A partir de ahora ya se puede utilizar la propiedad aspect-ratio en todos los navegadores. Puedes ver un ejemplo en el curso de CSS.
{{ comments.length }} comentarios