圖片旋轉：調整寬度和高度

我爲此做了一些窺探。有一些解決方案，但我無法正確理解它們。我試圖實現旋轉矩陣，但我不能這樣做。我創建了一個簡單的小提琴，點擊圖像旋轉90度（不包括我的實現，因爲我不知道該怎麼做）。以下是簡單的代碼。有人可以指導我或幫助我實施輪換。我想要的是最初你有一定的寬度和高度。旋轉90度時，寬度變爲高度，高度變爲寬度，因此圖像保持在div內。圖片旋轉：調整寬度和高度

fiddle link

<div><img id="rotate-image"></div> 
<span onClick="myFunction()">click<span>

function myFunction(){ 
$("#rotate-image").css("transform", "rotate(90deg):}

正如你可以看到小提琴一旦點擊，圖像轉90度。但是，如果您增加/減少結果和javascript部分之間的分隔線，圖像會越來越小。我希望圖像保持在div框內，並根據div框的寬度變小。

希望這不會混淆任何人。需要旋轉圖像（正常，90,180,270，恢復正常）

來源

2015-11-05 TheFron

http://jsfiddle.net/72nptzq5/6/

CSS

.parent{ 
    width: 70%; 
    height:300px; 
    border:1px solid black; 
    text-align: center; 
} 
#rotate-image{ 
    max-width:100%; 
    display: inline-block; 
} 
.table{ 
    display:table; 
    width:100%; 
    height:100%; 
} 
.table-cell{ 
    display:table-cell; 
    vertical-align:middle; 
}

HTML

<div class="parent"> 
    <div class="table"> 
     <div class="table-cell"> 
      <img id="rotate-image" src="https://cdn.tutsplus.com/net/uploads/legacy/254_apps/images/200x200.png" /> 
     </div> 
    </div> 
</div> 
<span onclick="myFunction()">click</span>

來源

2015-11-05 01:56:43

的唯一事情是，圖像出來的格框如果您增加或減少js和結果之間的分隔符（或減小頁面大小）。即使在旋轉後，圖像也應該基於div框的增加/減少來適應框。就像它在正常的外觀中所做的那樣。希望這是有道理的 – TheFron

圖片旋轉：調整寬度和高度

回答

相關問題