¿Por qué mi imagen se ve estirada?
El síntoma: Imágenes deformadas
Ocurre cuando definimos un ancho (width) y un alto (height) fijos que no coinciden con la proporción original de la foto. El navegador, al intentar cumplir tus órdenes, "aplasta" o "estira" los píeles para rellenar el hueco.
Esto es muy común en avatares de usuario o tarjetas (cards) donde queremos que todas las imágenes tengan el mismo tamaño exacto, sin importar si la foto original era cuadrada u horizontal.
La solución moderna: object-fit
En lugar de dejar que el navegador deforme la imagen, utilizamos la propiedad CSS object-fit:
cover;. Esta regla le dice a la imagen que debe cubrir todo el contenedor manteniendo
su proporción, recortando los sobrantes si es necesario.
Propiedades clave:
cover: Rellena el hueco manteniendo la proporción (recorta los bordes).contain: Muestra la imagen entera sin deformar (deja huecos vacíos).
Arréglalo ahora
En este ejercicio verás una imagen de un paisaje de 800x600 forzada a un cuadrado de 200x200.
Aplica la propiedad object-fit para que recupere su aspecto natural.
<style>
.imagen {
width: 400px;
height: 200px;
border: 2px solid #333;
/* Añade aquí la propiedad para arreglar el aplastamiento*/
}
</style>
<div class="card">
<h2>La Tierra</h2>
<img src="imgs/planeta.jpg" class="imagen" alt="Foto deformada">
<p>La imagen se ve deformada porque el contenedor no es cuadrado.</p>
</div>
<div>
<h2>La Tierra (normal 500x500)</h2>
<img src="imgs/planeta.jpg" alt="Foto normal">
<p>La imagen se ve deformada porque el contenedor se adapta.</p>
</div>
Recuerda que si usas object-fit: cover;, puedes añadir también object-position
para decidir qué parte de la imagen quieres que se quede en el centro del recorte.