Cuéntanos qué está pasando:
Hola buenas, tengo un problema respecto a las consignas, no logro comprender por qué no me toma que mi “img” no está centrado ni con un “max-width: 100%;” pero al mismo tiempo si me toma que mi “img” está con un “height: auto;” Si alguien me puede ayudar, desde ya muchas gracias <3.
Tu código hasta el momento
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<main id="main">
<div id="titulo">
<h1 id="title">Dr. Norman Borlaug</h1>
<p id="tribute-info">The man who saved a billion lives</p>
</div>
<div id="img-div"> <img id="image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" alt="#"> <figcaption id="img-caption">Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger. </figcaption></div>
<p id="tribute-info-2"></p>
<a target="_blank" href="https://es.wikipedia.org/wiki/Norman_Borlaug" id="tribute-link">click here for more information about Dr. Norman Borlaug</a>
</main>
</body>
</html>
/* file: styles.css */
#titulo{
text-align: center;
background-color:#EEEEEE;
}
#tribute-info{
text-align: center;
background-color: #EEEEEE;
}
#img-div{
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
Información de tu navegador:
El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 OPR/95.0.0.0
Desafío: Proyectos de diseño web responsivo - Construye una página tributo
Enlaza al desafío: