如何在div内旋转时保持居中随机输入图像

-1

我试图在显示图像的同时旋转图像，我无法将它保持在< div>的中心，当我旋转到90和270时度。这是我的代码如何在div内旋转时保持居中随机输入图像

.cn { 
background: url('images/transparent.png') repeat; 
height: 200px; 
position: relative; 
vertical-align: middle; 
} 

.east_largerwidth { 
position: absolute; 
-webkit-transform-origin: 75px 125px; 
-moz-transform-origin: 75px 125px; 
-ms-transform-origin: 75px 125px; 
-o-transform-origin: 75px 125px; 
transform-origin: 75px 125px; 
transform:rotate(270deg); 
-ms-transform:rotate(270deg); /* IE 9 */ 
-webkit-transform:rotate(270deg); /* Safari and Chrome */ 
} 

.west_largerwidth { 
display:block; 
margin:auto; 
-webkit-transform-origin: 75px 75px; 
-moz-transform-origin: 75px 75px; 
-ms-transform-origin: 75px 75px; 
-o-transform-origin: 75px 75px; 
transform-origin: 75px 75px; 
transform:rotate(90deg); 
-ms-transform:rotate(90deg); /* IE 9 */ 
-webkit-transform:rotate(90deg); /* Safari and Chrome */ 
}

这里的JavaScript函数，旋转显示图像

function rotatefunction() { 

    if (document.getElementById("ContentPlaceHolder1_Image1").classList.contains('east_largerwidth')) { 

       img.setAttribute('class', 'north'); 
        if (hidderValue > 200) { 
         document.getElementById("ContentPlaceHolder1_Image1").style.width = "auto"; 
         document.getElementById("ContentPlaceHolder1_Image1").style.height = "200px"; 
        } 
} else if (document.getElementById("ContentPlaceHolder1_Image1").classList.contains('west_largerwidth')) { 
      img.setAttribute('class', 'south'); 
       if (hidderValue > 200) { 
        document.getElementById("ContentPlaceHolder1_Image1").style.width = "auto"; 
        document.getElementById("ContentPlaceHolder1_Image1").style.height = "200px"; 
       } 
}

在html

<div id="divBackground" class="cn" > 
    <asp:Image ID="Image1" runat="server" ImageUrl="" style="height: 200px; max- height: 200px; max-width: 100%;" class='north'/> 
</div> 
<div class="fileUpload btn btn-warning"> 
    <input id="inputFile" runat="server" type="file" name="file" onchange="previewFile()" CssClass="upload" /> 
</div> 
<asp:Button UseSubmitBehavior="false" ID="btnRotate" runat="server" Text="Rotate" class="btn btn-warning" OnClientClick="return rotatefunction();" />

0和180度旋转

90和270度数旋转

任何人都可以请帮我，我怎么会保存图片上水平当旋转到90度和270度的中心？谢谢。

来源

2015-10-06 Jera Balais

center-block { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

来源

2015-10-06 08:29:20

如何在div内旋转时保持居中随机输入图像

回答

相关问题