如何在点击所有img html标签时添加放大/缩小？

Question

在点击html文档(img标签)中的所有图像上添加放大/缩小的最简单方法是什么？

我正在用HTML编辑文档,并希望专注于本文档的内容.因此,我宁愿避免在img元素周围添加任何额外的div元素,至少在源文档中是这样.

有没有简单的javascript模块,我可以插入为此目的？

澄清.简单:

        img:hover {
            height: 400px;
        }

我几乎可以为我做这个工作但是:

1. 它破坏了布局
2. 与悬停一起工作,我更喜欢点击工作.

根据Paulie_D的回答,这是我最终提出的:

适用于Chrome和IE9.我尝试将此脚本添加到Paulie_D的答案中,但我的编辑在那里被拒绝了 - 所以这里是:

<style>
        img {
            cursor: pointer;
        transition: -webkit-transform 0.1s ease
        }
    img:focus {
        -webkit-transform: scale(2);
        -ms-transform: scale(2);
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function(){
        var imgs = document.querySelectorAll('img');
        Array.prototype.forEach.call(imgs, function(el, i) {
            if (el.tabIndex <= 0) el.tabIndex = 10000;
        });
    });
</script>

Answer 1

任何改变图像高度的东西都可能会破坏你的布局.

相应你应该看(IMO) transform: scale(x)

JSFiddle演示(使用:作为mousedown活动 - 只需单击并按住)

CSS

img {
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
}

img:active {
    -webkit-transform: scale(2);
    transform: scale(2);
}