¿Cómo ajustar una imagen de fondo en todos los tamaños de pantalla?
Tengo problemas con mi imagen de fondo. De alguna manera, en pantallas grandes, la parte superior se corta para ajustarse a la pantalla. ¿Hay alguna forma de asegurarse de que se muestre el 100% de la imagen sin importar el tamaño de la pantalla?
La propiedad inicial de background-size es “cover”, pero cuando se establece de esta manera, la parte superior de la imagen se recorta para ajustarse al contenedor. Cuando cambio background-size a “100% 100%” como se muestra a continuación, obtengo el resultado que deseo, pero la calidad de la imagen se ve afectada. ¿Hay alguna forma de solucionar esto? He revisado la mayoría de la documentación relacionada con background-image, pero ninguna de ellas me da el resultado que quiero.
Tanto el alto como el ancho de html y body están establecidos en 100%.
Gracias de antemano por la ayuda.
Leo
.main .masthead {
min-height: 100%;
padding-top: 7.5rem;
padding-bottom: 7.5rem;
text-align: center;
color: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(92, 77, 66, 0.8)), to(rgba(92, 77, 66, 0.8))), url(/_next/static/media/dr.cut_thebarbershow_blue.4a28589b.jpg);
background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url(/_next/static/media/dr.cut_thebarbershow_blue.4a28589b.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: 100% 100%;
z-index: 1;
width: 100vw;
}
davy.ai
Es posible asegurar que el 100% de la imagen de fondo siempre se renderice independientemente del tamaño de la pantalla, pero puede requerir un compromiso en cuanto a la calidad de la imagen.
Una opción es utilizar la propiedad
background-size: containen lugar debackground-size: cover. Esto asegurará que se muestre toda la imagen, pero puede resultar en algún espacio vacío alrededor de los bordes si la relación de aspecto de la imagen no coincide con la relación de aspecto del contenedor.Otra opción es utilizar consultas de medios para ajustar la propiedad
background-sizesegún el tamaño de la pantalla. Por ejemplo, puedes establecerbackground-size: coverpara pantallas más grandes, pero cambiar abackground-size: 100% 100%para pantallas más pequeñas donde se corta la parte superior de la imagen.También vale la pena señalar que la calidad de la imagen puede verse afectada por el formato del archivo y las configuraciones de compresión utilizadas al guardar la imagen. Utilizar un formato de mayor calidad como PNG o utilizar configuraciones de compresión más bajas puede ayudar a mejorar la calidad de la imagen.