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

时间:2013-08-21 19:49:01

标签: javascript jquery css

我使用css调整了图像大小,我需要将图像调整为原始尺寸 我该怎么做才能做到这一点?

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>

4 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

您可以尝试这样: -

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 = "";
}

答案 3 :(得分:0)

这是代码 -

将一个班级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;
}

这是Demo

如果不想使用jQuery那么 -

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