Question

所以，我在photoshop中创建了一个1920x1080的图像，并且我将它拼接成了各个部分，因此需要链接的图像可以附加一个javascript标记用于链接。

我希望图像可以根据您使用的显示器类型进行缩放，只要您的比例为16：9即可。我遇到的问题是关于图像连续排列3的方式。对于具有3个图像的部分，行中的第3个图像被下推。或者，图像是完整尺寸1920x1080，但图像之间没有缩放和间隙。

我的HTML看起来像这样：

<main>
    <section>
        <img src="images/NuclearFuelCycle1.png"/>
    </section>
    <section>
        <div><img id="1" src="images/NuclearFuelCycle2.png"/><span style="cursor:pointer" onclick="openMining()"><img id="2" src="images/NuclearFuelCycle3.png"/></span><img id="3" src="images/NuclearFuelCycle4.png"/></div>
    </section>
    <section>
        <img src="images/NuclearFuelCycle5.png"/></section>
    <section>
        <img src="images/NuclearFuelCycle6.png"/><span style="cursor:pointer" onclick="openConversion()"><img src="images/NuclearFuelCycle7.png"/></span><img src="images/NuclearFuelCycle8.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle9.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle10.png"/><span style="cursor:pointer" onclick="openEnrichment()"><img src="images/NuclearFuelCycle11.png"/></span><img src="images/NuclearFuelCycle12.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle13.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle14.png"/><span style="cursor:pointer" onclick="openReactor()"><img src="images/NuclearFuelCycle15.png"/></span><img src="images/NuclearFuelCycle16.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle17.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle18.png"/><span style="cursor:pointer" onclick="openSpentFuel()"><img src="images/NuclearFuelCycle19.png"/></span><img src="images/NuclearFuelCycle20.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle21.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle22.png"/><span style="cursor:pointer" onclick="openFuelFabrication()"><img src="images/NuclearFuelCycle23.png"/></span><img src="images/NuclearFuelCycle24.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle25.png"/></section>
    <section>
        <img src="images/NuclearFuelCycle26.png"/><span style="cursor:pointer" onclick="openStorageDisposal()"><img src="images/NuclearFuelCycle27.png"/></span><img src="images/NuclearFuelCycle28.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle29.png"/>
    </section>
</main>

我的CSS看起来像这样：

* {
    margin: 0;
    padding: 0;
    border: 0;
    border-collapse: collapse;
}

body {
    max-width: 100% !important;
    height: auto;
}

main {
    display: inline-block;
    padding: 10px;
}

section div img{
    width: auto;
}

这些代码中的一些代码没有用......我正在尝试尝试创建解决方案。任何帮助将不胜感激，我必须在2天内提交这个P

Answer 1

如果我正确理解，当浏览器窗口调整大小时，切片的图像片段会重新定位错误。

为什么不尝试使用纯HTML解决方案并使用<map>标记在图片的各个部分插入链接，而不是整理图像并使用javascript？

这是展示可扩展HTML图像映射的Fiddle（使用image-map-resizer插件）

您可以详细了解图片地图here。

Answer 2

＆＃39;空格＆＃39;问题很可能是由于display:inline的工作方式，这就是图像和范围。任何换行符等都被视为空格char。一个简单的修复可能是使用display:flex。

问题的第二个（也是主要部分）是您想要根据宽度进行缩放。一点点javascript和使用transform: scale(...)修复了这个问题。下面是一个代码段（无法显示调整大小），所以这里也是CodePen：https://codepen.io/anon/pen/PpXpwO

＆＃13;

window.onresize = resizer;
resizer();
function resizer() {
  console.log("resized")
  var _main = document.querySelector("main");
  var image_width = 600; // the original image width
  var ratio  = _main.offsetWidth/image_width;
  _main.style.transform = "scale("+ratio+")";
};

＆＃13;

main {
  transform-origin: 0 0;
}
section {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
section * {
  flex: 0 0 auto;
  display: block;
}

＆＃13;

<main>
  <section>
    <img src="https://placehold.it/600x150g" />
  </section>
  <section>
    <img id="1" src="https://placehold.it/100x150" />
    <a style="cursor:pointer" onclick="openMining()"><img id="2" src="https://placehold.it/300x150/370000" /></a>
    <img id="3" src="https://placehold.it/200x150" />
  </section>
  <section>
    <img src="https://placehold.it/600x150g" />
  </section>
</main>

＆＃13;

3内嵌缩放图像

2 个答案: