javascript - Onclick 我应该得到原始大小的图像

Question

我已经使用 css 调整了图像的大小，我需要将图像恢复为原始大小 onclick 我应该怎么做才能做到这一点？

在http://jsfiddle.net/RDcA7/找到 CSS

<style type="text/css">
.pad {
display:inline-block;
padding: 5px;
border: 1px solid #ddd;
-webkit-box-shadow: 0 0 3px 0 rgba(200, 200, 200, 0.5);
box-shadow: 0 0 3px 0 rgba(200, 200, 200, 0.5);
}
.pin {
background: #FEFEFE;
opacity: 1;
display: inline;
}
.pin img {
width:auto;
image-rendering:optimizeQuality;
-ms-interpolation-mode: bicubic;
max-height: 200px;
max-width: 400px;
}  
</style>

Answer 1

http://jsfiddle.net/RDcA7/4/ 您已经设置了 max-height 和 max-width 属性...删除了它们，并且您拥有原始图像大小。jQuery：

$(".pin img").on('click',function(){
    $(this).css({"max-height":"none","max-width":"none"});
});

Answer 2

imgObject.width = imageObject.naturalWidth;
imgObject.height = imageObject.naturalHeight;

Answer 3

你可以这样尝试：-

var img = document.getElementsByTagName("img")[0];
img.onload=function(){
    console.log("Width",img.naturalWidth);
    console.log("Height",img.naturalHeight);
}

var img = document.getElementByTagName("img")[0];
img.onclick = function(){
this.className = "";
}

Answer 4

这是代码 -

添加一个类small来<img>标记 -

<img class="small" src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />

添加一个 onclick 监听器 -

$("img").click(function(){
    $(this).removeClass("small")
})

最后是 CSS -

pin img.small {
    width:auto;
    image-rendering:optimizeQuality;
    -ms-interpolation-mode: bicubic;
    max-height: 200px;
    max-width: 400px;
}

这是演示

如果不想使用 jQuery，那么 -

var img = document.getElementByTagName("img")[0];
img.onclick = function(){
   this.className = "";
}