javascriptで画像回転後のレイアウトが調整できない

Question

【現象】
javascriptで画像を回転させ、回転後のレイアウトを整えたいと考えています。しかし、回転後の画像の上下に余白が発生していまい、どうしても取り除くことができません。画像回転後の余白を消去する方法をご存知の方がいらっしゃいましたらご教授頂けますとうれしいです。なお、画像は縦長画像になります。

【開発環境】
・IDE : visual studio 2015 pro
・言語：.NET(VB)
・OS : win10 pro

【ソースコード】
〇html (ascx)

<table id="tblImg" style="text-align: center; width: 100%;">
 <tr>
  <td>
   <asp:Image ID="img" runat="server" ImageAlign="Middle" BorderStyle="Solid" BorderWidth="1px" width="100%"/>
  </td>
 </tr>
</table>

〇javascript

//.NETの仕様上、imgには自動でControl1のようなプレフィックスが付きます
var imgObj = document.getElementById("Control1_img");
var tblImgObj = document.getElementById("tblImg");

//イメージを90度回転
imgObj.style.transform = "rotate(90deg)";
imgObj.style.height = tblImgObj.clientWidth * 0.95 + "px";
imgObj.style.width = "auto";

//テーブルの余白を消去
tblImgObj.style.overflow = "hidden";

【試したこと】
1)親要素を設けずにimgのみ、2)親要素をdivでコーディングを試しましたが、いずれも画像回転後に画像の上下に空白が生じてしまいます。transform.transrateで移動することはできますが、空白は自動調整されませんでした。

Answer 1

指定しない場合画像の中央を基点に回転するので、縦横が違うならその分ずれます。

【transform-originプロパティの意味と使い方 | CSS | できるネット】
https://dekiru.net/article/13252/

Comments

[devbgn]

>kei344さん
返信遅くなりました。リンク先を確認しました。
やはり中央起点での回転では余白が自動調整されないということですね。
余白調整の対処は別途考えてみます。情報提供ありがとうございました！

Answer 2

imgObj.style.height = tblImgObj.clientWidth * 0.95 + "px";
imgObj.style.width = "auto";

この2行のせいに見えます。ここをコメントアウトしたらダメですか？

Comments

[devbgn]

>zohnamさん
コメントありがとうございます。ご助言の通り、コメントアウトして実行してみましたが、やはり余白は表示されてしまっています。
もしかするとこれはtransform.rotateの仕様になってしまうのでしょうか？

[zohnam]

私が「余白」の解釈を勘違いしていたかもしれません。transformは表示上の見た目をずらすものです。HTMLタグ構成としては、元の位置のままにそのままあるものとして扱われます。
90度回転することで横長画像が配置されることにしたいのであれば、そのimgタグはposition:absolute等を利用してHTML配置上の座標計算に影響を与えないようにしつつ、枠自体は別途DIVタグなどで確保するのがいいでしょう。

[devbgn]

>zohnamさん
返信が遅くなりました。

>>transformは表示上の見た目をずらすものです。HTMLタグ構成としては、元の位置のままにそのままあるものとして扱われます。
→transformの仕様がよくわかりました。やはりabsoluteで絶対配置にしないとだめなんですね。ご助言ありがとうございました。

お二方のアドバイスのどちらをベストにするか迷いましたが、解決法を提示くださったのでzohnamをベストアンサーとさせていただきます。