-3

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>
4

4 に答える 4

1

http://jsfiddle.net/RDcA7/4/ max-height プロパティと max-width プロパティを設定しました...それらを削除すると、元の画像サイズになります。jQuery:

$(".pin img").on('click',function(){
    $(this).css({"max-height":"none","max-width":"none"});
});
于 2013-08-21T20:02:58.960 に答える
0 
imgObject.width = imageObject.naturalWidth;
imgObject.height = imageObject.naturalHeight;
于 2013-08-21T19:52:16.393 に答える
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 = "";
}
于 2013-08-21T19:52:52.793 に答える
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;
}

ここにデモがあります

jQueryを使用したくない場合 -

var img = document.getElementByTagName("img")[0];
img.onclick = function(){
   this.className = "";
}
于 2013-08-21T19:53:49.197 に答える