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:
- La imagen no colapse ni se deforme.
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagen dentro de un Div</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="image-container">
<img src="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: 5px 5px 15px 5px;
overflow: hidden; /* Evita que la imagen sobresalga */
display: flex;
justify-content: center;
align-items: center;
}
/*Estilos para que la imagen no se sobresalga*/
.image-container img {
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
Curso de Frontend Developer
