En este tutorial, aprenderás de manera sencilla cómo insertar imágenes dentro de un div y ajustarlas correctamente sin perder su proporción, utilizando propiedades modernas de CSS como object-fit.
Ejemplo:
Estás diseñando una página web y necesitas mostrar una imagen dentro de un div de manera que:
A continuación sigue los siguientes pasos
Paso 1: Estructura básica del archivo HTML
Crea un archivo llamado index.html y escribe la estructura básica
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Imagen dentro de un Div</title><linkrel="stylesheet"href="styles.css"></head><body><divclass="image-container"><imgsrc="neymar_brasil.png"alt="Descripción de la imagen"></div></body></html>Toma en cuenta que el archivo incluye un enlace a una hoja de estilos llamada style.css
Paso 2: Crear la hoja de estilos CSS
Crea un archivo llamado styles.cssen la misma carpeta y aplica los siguientes estilos:
Usando object-fit
/*Estilos del contenedor*/.image-container{
position: relative;
top: 2rem;
left: 2rem;
width: 300px;
height: 200px;
border: 2px solid #333;
box-shadow: 5px5px15px5px;
overflow: hidden; /* Evita que la imagen sobresalga */display: flex;
justify-content: center;
align-items: center;
}
/*Estilos para que la imagen no se sobresalga*/.image-containerimg {
width: 100%; /* Ajusta el ancho al contenedor */height: 100%; /* Ajusta el alto al contenedor */object-fit: cover; /* Mantiene la proporción de la imagen */
}
Paso 3: Verifica el resultado
Guarda ambos archivos (index.html y styles.css), coloca una imagen por ejemplo neymar_brasil.png en la misma carpeta y abre el archivo index.html en tu navegador.
Veras la imagen ajustada correctamente dentro del contenedor
