Tengo una imagen de alta resolución que es la imagen de fondo de un div. El div sigue mostrándolo en un tamaño más pequeño, pero me gustaría dejarlo sin escalar. No me importa que la imagen de fondo se recorte para mostrar solo una parte de la imagen, siempre que esa parte tenga el tamaño original.
JavaScript:
console.log(img.width) // this comes out 3840px resultDiv.style.backgroundImage = "url('" + img.src + "')"; resultDiv.style.backgroundRepeat = "no-repeat";CSS:
.img-full {//this is the class of the img max-width: none; max-height: none; } #bottomPanel {//this is the resultDiv that is scaling the background image height: 30vh; background: black; margin-left: 10px; margin-right: 10px; overflow-x: auto; overflow-y: auto; }puede especificar la siguiente propiedad CSS
background-size: cover;esto asegurará que el fondo cubra todo el elemento independientemente de si fue recortado o no, a diferencia de
background-size: contain;que escalará la imagen para que encaje dentro del elemento y sea completamente visible
Si desea evitar la escala mediante el uso de background-size: cover . Esto recorta el fondo, y nunca se estira para mí.
Más información sobre background-size : https://developer.mozilla.org/en-US/docs/Web/CSS/background-size