0

Continúo con mi aprendizaje en html y tengo algunos problemas. El caso es que estoy haciendo un html y tengo una imagen, pero cuando reduzco la pantalla la imagen se reduce demasiado y no se centra. El problema está en que no encuentro el por qué.

/*Div de quienessomosimg*/ .foto {width: 30%;height: 500px; margin: 10px auto; margin-left: 65px; overflow: hidden; float: left;} img {width: 100%; height: auto;}

<div class="foto">
  <img src="vista-vertical-torre-eiffel-paris-francia_1258-3169.jpg" alt="">
</div>

Si pudieran ayudarme les estaría muy agradecido

1 respuesta 1

1

Tu imagen se hace pequeña porque has establecido 30% como tamaño, por ende mantiene ese tamaño en proporción al tamaño de la pantalla, para editar esa instruccion puedes usar media querys, las cuales son instrucciones que se pueden dar a un elemento dependiendo del tamaño de pantalla, por ejemplo:

@media screen and (max-width: 800px) {
.foto {
     width: 70%;
   }
}

Esto cambia el tamaño de 30% por un 70% al llegar a un tamaño de pantalla de 800px, toma en cuenta que estas usando un alto estático, mi recomendación es que uses un height: auto; para no tener que estar calculando el alto de la imagen en cada query

1
  • Muchísimas gracias, ha funcionado a la perfección ;)
    – Fst0
    Commented el 29 nov. 2020 a las 11:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.