求问前端大佬一个关于js放大图片的问题

980041382

[JavaScript] 纯文本查看 复制代码

    zoomInButton.addEventListener('click', () => {
        scaleFactor += 0.2;
        console.log(`Zooming in, new scaleFactor: ${scaleFactor}`);
        updateMapDimensions();
        updateMarkers();
    });

    zoomOutButton.addEventListener('click', () => {
        scaleFactor = Math.max(1.0, scaleFactor - 0.2); // 防止缩小比例低于1
        console.log(`Zooming out, new scaleFactor: ${scaleFactor}`);
        updateMapDimensions();
        updateMarkers();
    });

[JavaScript] 纯文本查看 复制代码

    let mapWidth, mapHeight;
    const updateMapDimensions = () => {
        mapWidth = (topRightX - topLeftX) * scaleFactor;
        mapHeight = (bottomLeftY - topLeftY) * scaleFactor;
        mapContainer.style.width = `${currentWidth * scaleFactor}px`;
        mapContainer.style.height = `${currentHeight * scaleFactor}px`;
        mapContainer.style.backgroundSize = `${currentWidth * scaleFactor}px ${currentHeight * scaleFactor}px`;
        console.log(`Updated map dimensions: width=${mapWidth}, height=${mapHeight}`);
    };

我执行放大按钮后。。图片确实会变大。。但是原本下面的图片没了  变成了白色   如图。。我应该怎么样设置属性呢？

980041382

原本的图片的地方 就变成了空白

rrdish

给它加一个定位或者浮动，让被放大元素脱离文档流

980041382

rrdish 发表于 2024-7-29 16:31
给它加一个定位或者浮动，让被放大元素脱离文档流

我是对图片做放大啊

a774733519

background-size 属性也同时被缩放了

将原始图片作为单独的 <img> 元素放置在地图容器内，而不是使用背景图像
当缩放发生时，只调整容器的尺寸，而不要改变内部图片的尺寸

[HTML] 纯文本查看 复制代码

<!-- HTML 结构 -->
<div id="map-container">
  <img id="map-image" src="your-image-source.jpg" alt="Map">
</div>

[JavaScript] 纯文本查看 复制代码

// JavaScript 代码

// 获取元素
const mapImage = document.getElementById("map-image");

// 更新地图尺寸函数
const updateMapDimensions = () => {
  const currentMapWidth = mapImage.naturalWidth; // 获取图片原始宽度
  const currentMapHeight = mapImage.naturalHeight; // 获取图片原始高度

  mapWidth = currentMapWidth * scaleFactor;
  mapHeight = currentMapHeight * scaleFactor;

  mapContainer.style.width = `${mapWidth}px`;
  mapContainer.style.height = `${mapHeight}px`;

  mapImage.style.width = `${currentMapWidth}px`; // 不要缩放图片本身
  mapImage.style.height = `${currentMapHeight}px`; // 不要缩放图片本身

  console.log(`Updated map dimensions: width=${mapWidth}, height=${mapHeight}`);
};

980041382

a774733519 发表于 2024-7-29 18:39
background-size 属性也同时被缩放了

将原始图片作为单独的  元素放置在地图容器内，而不是使用背景图像 ...

老哥 我按照你说的 改了一下 改的不对。。  我原始文件发给你了

leohsun

这个贴还没结呀

xiaoboy

[JavaScript] 纯文本查看 复制代码

const mapContainer = document.getElementById('mapContainer');
const image = mapContainer.querySelector('img');
const zoomInButton = document.getElementById('zoomInButton');
const zoomOutButton = document.getElementById('zoomOutButton');

let scaleFactor = 1.0;

zoomInButton.addEventListener('click', () => {
  scaleFactor += 0.2;
  updateMapDimensions();
});

zoomOutButton.addEventListener('click', () => {
  scaleFactor = Math.max(1.0, scaleFactor - 0.2);
  updateMapDimensions();
});

function updateMapDimensions() {
  const { naturalWidth, naturalHeight } = image; // 获取图片原始尺寸
  const newWidth = naturalWidth * scaleFactor;
  const newHeight = naturalHeight * scaleFactor;

  image.style.width = `${newWidth}px`;
  image.style.height = `${newHeight}px`;

  // 如果需要调整容器大小，可以取消注释下面两行
  // mapContainer.style.width = `${newWidth}px`;
  // mapContainer.style.height = `${newHeight}px`;
}

DHCF

还没有解决吗。还需要帮助吗