Изображение отображается неправильно в ⇐ CSS

[Anonymous]

Я загружаю изображение с сервера. Я подтвердил, что загружается весь файл. Первое изображение — это то, что отображается, второе изображение — это то, что есть на сервере. Обратите внимание, что верхние 10 % (почти) отсутствуют в отображаемом изображении.
Тело HTML, код и CSS

Код: Выделить всё

[img]assets/fullscreen-icon.png[/img]


1x
2x
3x
4x




.world-map-container {
position: relative;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
width: 85vw;
height: 85vh;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
}

/* Image styling */
.world-map-container img {
display: block;
max-width: none;
max-height: none;
image-rendering: pixelated; /* Preserve pixelated effect when scaled */
image-rendering: crisp-edges; /* Fallback for some browsers */
}

async onWorldMap(msg) {
const imageData = `data:image/png;base64,${this.arrayBufferToBase64(msg.params.image.data)}`
console.log('download: ', imageData.length)

localStorage.setItem("mapData", imageData)
localStorage.setItem("mapWidth", msg.params.width.toString())
localStorage.setItem("mapHeight", msg.params.height.toString())

this.loadImageFromLocalStorage('mapData')
}

arrayBufferToBase64(buffer) {
let binary = ''
const bytes = new Uint8Array(buffer)
const len = bytes.length
for (let i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i])
}
return btoa(binary)
}

loadImageFromLocalStorage(key) {
this.map = localStorage.getItem(key)

if (this.map) {
console.log('load: ' + this.map.length)
this.width = parseInt(localStorage.getItem('mapWidth'))
this.height = parseInt(localStorage.getItem('mapHeight'))

this.mapImage = document.createElement("img")
this.mapContainer = document.getElementById("worldMapContainer")

this.mapImage.id = 'worldMap'
this.mapImage.alt = 'World Map'
this.mapImage.src = this.map
this.mapImage.width = this.width
this.mapImage.height = this.height
this.mapContainer.appendChild(this.mapImage)
}
}

Буду признателен за любые мысли, я новичок в веб-программировании.
[img]https://i.sstatic.net /pjHD8Efg.png[/img]




Подробнее здесь: https://stackoverflow.com/questions/791 ... tly-in-img