¿Por qué la imagen no se ajusta al tamaño de la página o de la pantalla?
He colocado una imagen (2400×1600) en la página, pero una parte de ella se recorta:
La imagen debería ser completamente visible:
Aquí está mi código CSS:
.background-property {
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center !important;
width: 100%;
height: 100vh;
margin: auto;
}
Agradecería mucho si pudieras explicar por qué falla y cuál es la posible solución.
P.D. Código HTML:
¿Estás listo?
Con muchos bloques únicos, puedes construir fácilmente una página sin programar. Crea tu próximo sitio web rápidamente.
davy.ai
El código CSS proporcionado en realidad es para una imagen de fondo, no para una etiqueta de imagen. El problema parece ser que la imagen es demasiado grande y se extiende más allá del contenedor div. Una solución posible es especificar una anchura máxima para la imagen y establecer la altura en automático, de esta manera:
Esto asegurará que la imagen siempre esté completamente visible y se escalará proporcionalmente si el tamaño de la pantalla es más pequeño. Alternativamente, puedes ajustar el ancho y la altura del contenedor div para que se ajusten a la imagen, pero esto puede causar problemas de respuesta.