Javascript 在图库中复制图像

我有一个图像库，可以在线显示所有图像，目标图像在页面的其他地方显示得更大。我想解决的问题是使目标图像变大，而不将其从画廊流中删除

<div class="gallery">
    <a href="#1"><img id="1" src="http://placehold.it/100" /></a>
    <a href="#2"><img id="2" src="http://placehold.it/200" /></a>
    <a href="#3"><img id="3" src="http://placehold.it/300" /></a>
    <a href="#4"><img id="4" src="http://placehold.it/400" /></a>
</div>

小提琴：

i、 例如，当图像200显示得更大时，我希望它也保留在顶部的gallery视图中，而不仅仅是移动到页面底部

理想情况下有一个html/css解决方案吗？ 我可以使用javascript解决方案，但请不要使用jquery。在进入jquery之前，我还在学习javascript。

这里是一个工作示例：

一点JavaScript都不多，请将其放在

中：

不要忘记HTML中额外的

：

<div id="big"></div>

编辑：

甚至不使用JavaScript也可以，但您需要一些额外的HTML：

---

我只是在示例中添加了一个基本javascript函数，如：

function showMe(img, size) {
    document.getElementById("content").src = img.src;
    document.getElementById("content").style.width = size + "px";
    document.getElementById("content").style.height = size + "px";
}

---

你可以在这里看到全部变化。请帮我在beaufity it中添加一些css，；）

这几乎奏效，主要问题是1。新项目和旧项目都在更改大小和2。新项目不在页面底部（这不需要/需要修复，理想情况下，图像将足够大以填充空间），我只是更改了CSS以解决这些问题：看起来不错！我试图弄清楚如何将css从img:target移动到下一个大选择器。到目前为止，我只从img:target复制粘贴到#big>img，但这并不是我想要的…我在想，但我的图库有20到50张图片，这将使加载时间加倍。我想我可以使用缩略图，然后使用我的JavaScript解决方案。

<div id="big"></div>

function showMe(img, size) {
    document.getElementById("content").src = img.src;
    document.getElementById("content").style.width = size + "px";
    document.getElementById("content").style.height = size + "px";
}