ブログにアップした画像を90度回転させて表示する |    恵那爺の里山歩き

   恵那爺の里山歩き

千葉県を中心に 日帰り山歩きや散歩などで撮った写真を中心に載せています。

 

 

PCに写真を撮り込んだ時、横向きで保存された画像

エクスプローラで右回りにしているのだが、アメブロにアップすると

修正前の横向きに取り込まれてしまう。

一度PCの画像ソフトで開いて向きを変えて保存して、再度アップしていた。

 

 

取り込んだままの画像のExifでは、画像方向が上左

 

エクスプローラで向きを変えると、右上が画像方向が変わっている

これが消えちゃうと、元の状態に戻ってしまうから

やり方がないかいろいろ探していたんだが、今まで探しあてることが出来なかった。

 

 

上の画像のHTML表示は

 

<p><a href="https://stat.ameba.jp/user_images/20220429/10/enaji2/34/6a/j/o0800060015109844732.jpg"><img alt="" height="315" src="https://stat.ameba.jp/user_images/20220429/10/enaji2/34/6a/j/o0800060015109844732.jpg" width="420"></a></p>

 

そこに、style="transform:rotate(90deg);"を追加

 

<p><img alt="" height="315" src="https://stat.ameba.jp/user_images/20220429/10/enaji2/34/6a/j/o0800060015109844732.jpg" style="transform:rotate(90deg);" width="420"></p>

 

どうも高さ315のところに回転させることで420の物が入るせいで文字部分にかかってしまうようだ。

 

<p><img alt="" height="315" src="https://stat.ameba.jp/user_images/20220429/10/enaji2/34/6a/j/o0800060015109844732.jpg" style="transform:rotate(90deg);" width="420"

 

 

 

そのため、画像の前にポインターを持って行きEnter Enterとすると

文字にかからない様になった。

もっと、格調の高いやり方があるのかもしれないけどとりあえずは、なんとか重ならないで表示できるようになった。

HTMLの書き方が色々Webに載っているのだが、上手く動かないことも多く

使えるとすごく嬉しい。

 

<p><img alt="" height="315" src="https://stat.ameba.jp/user_images/20220429/10/enaji2/34/6a/j/o0800060015109844732.jpg" 

style="transform:rotate(90deg);" width="420"

<p>&nbsp;</p>
<p>&nbsp;</p>

<p>&nbsp;</p>

 

 

 

 

 

 

オマケ 反対向きにしてみた。

<p><img alt="" height="315" src="https://stat.ameba.jp/user_images/20220429/10/enaji2/34/6a/j/o0800060015109844732.jpg" style="transform:rotate(-90deg);" width="420"></p>