I have a high-resolution image that is the background image of a div. The div keeps rendering it at a smaller size but I would like to leave it unscaled. I don't mind that the background image is cropped to show only a portion of the image as long as that portion has the original size.

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;
}