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> </p>
<p> </p>
<p> </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>