1

以下のコードを書きました。IE バージョンで実行する必要があるため、回転にフィルターを使用しました。ボタンを数回クリックすると、画像の幅が更新され、画像の位置が変更されます。

どんな助けでも大歓迎です。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Zoom Issue</title>

<style>
.ImgClass{
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
height : auto;
width : 100%;

}
.divClass{
width : 800px;
height : 750px;
}

</style>
</head>

<SCRIPT type="text/javascript">
function zoomImage(){
    document.getElementById('myImage').style.width = document.getElementById('myImage').offsetWidth  * 1.5;
}
</SCRIPT>

<body>
<input type="button" id='btnClick' value='Click' onClick="zoomImage();"/>
<DIV class='divClass'>
<IMG class='ImgClass' id='myImage' src='Image.jpg' />
</DIV>

</body>
</html>
4

1 に答える 1

1

間違った次元を変更しているように見えます。横に回転させると、幅が高さになり、高さが幅になります（頭を横に置いていない場合）：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Zoom Issue</title>
    <style>
    .ImgClass{
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        height : 100%;
        width : auto;
    }
    .divClass{
        width : 800px;
        height : 750px;
    }
</style>
</head>

<SCRIPT type="text/javascript">
    function zoomImage(){   
        var img = document.getElementById('myImage');   
        img.style.height = e1.offsetHeight * 1.5 + "px";
    }
</SCRIPT>

<body>
    <input type="button" id='btnClick' value='Click' onClick="zoomImage();"/>
    <DIV class='divClass'>
        <img class='ImgClass' id='myImage' src="Images/IMG_6686.JPG">
    </DIV>
</body>
</html>

これはIE8でうまくいくようです。

于 2012-11-08T16:05:47.320 に答える