No puedo resolver una historia de usuario

Buenas tardes!

Quede atrapado en la siguiente historia del proyecto sobre hacer una pagina tributo (primer proyecto del diseño responsivo) :

Historia de Usuario #8: El elemento img debería cambiar de tamaño de forma responsiva, en relación al ancho de su elemento padre, sin exceder su tamaño original.

Si bien la imagen es responsiva no puedo hacer que el test me de correcto. Les dejo mi codigo hecho:

HTML :

 <div id="img-div">
        <p> <img id="image" src="URL DE LA IMAGEN"> </p>
        <div id="img-caption">
        <h4>TEXTO </h4>
         </div>
</div>

CSS:

#image {
  width: 450px;
  height: 350px;
  max-width: 100%;
  height: auto;
}

Gracias a todos por su ayuda!

¿Puedes compartir el link de tu proyecto?
Para que sea mas fácil ver que errores marca tu codigo

Hola Francisco!

Te dejo el link :

Tributo Marcelo Bielsa (codepen.io)

Estaba pensando que quizas el error sea porque hay mas imagenes en la pagina.

Gracias por ayudarme!

Al correr los tests, tambien puedes ver ayudas de porque no se pasaron todos los test

Use the “display” style property with a value of “block” for responsive images.: expected ‘inline’ to equal ‘block’
AssertionError: Use the “display” style property with a value of “block” for responsive images.: expected ‘inline’ to equal ‘block’

basicamente dice que para imagenes responsivas hay que utilizar la propiedad

display: block;

que es lo que le falta a tu codigo

de igual manera seria importante investigar el porque usar display: block en imagenes responsivas es importante.

Gracias Francisco por tu ayuda!

Paso el test e investigue mas sobre el por que usar display: block para imagenes responsivas.

Un abrazo!

1 Like