• 投稿 – 新規追加にて、
    メディアライブラリにアップデートした画像を追加して公開した後に、投稿ページを見ると画像に長体がかかる現象(縦長になる)が起こります。
    こちらの現象は投稿者PCだけに起こる現象です。他のPCは問題なく表示されます。2時間経過後に見ても同じ状態です。

    原因がわからないので、ご教授いただけますと助かります。

    画像のhtmlはこちらになります。

    <p><img class='alignnone size-full wp-image-14279' src='https://(ドメイン)/images/2022/03/(画像名).jpg' alt='' /></p>

    よろしくお願いいたします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • この手の問題はCSSが関わっていると思われます。HTMLコードだけの提示だとエスパー案件なので回答が得られないかもしれません。

    たとえばブラウザの窓幅が狭いときに画像が窓外にはみ出さないように画像の最大幅がブラウザ窓幅と同じかそれより小さくなるように指定されているような場合に画像の縦サイズを制御していなければ場合そのようになります。(これが全てではありませんが。)

    次のようにcssでheight(高さ)をauto(自動)で指定してみます。
    <p><img class='alignnone size-full wp-image-14279' src='https://(ドメイン)/images/2022/03/(画像名).jpg' style="height:auto" alt='' /></p>
    これで画像のアスペクト比に応じて画像の高さが自動的に調節されます。

    上手く行くようであればCSSのコードにでも足しておきます。

    たとえば(.alignnoneが何用のクラスかは知りませんが仮に画像表示関係の右寄せ左寄せを無しにするクラスだとするなら)
    .alignnone{ height:auto }

    同時にCSSでaspect-ratioが指定されていないことを確認して下さい。昨年あたりまででブラウザによって表示が違うということであればこれだったかもしれませんが最近だとどうでしょう。

    本題とはズレますが、HTMLコードのimgタグでは画像幅と高さを指定する方がレンダリングが速くなるのでなるべく指定した方が良いと思います。
    <p><img class='alignnone size-full wp-image-14279' src='https://(ドメイン)/images/2022/03/(画像名).jpg' width="画像幅の数字" height"画像高さの数字" alt='' /></p>
    表示したい画像幅と画像高さではなく画像の横縦サイズを指定しておきます。width=”800″ height=”600″ のように指定するようにします。
    なお、HTMLコードで画像のwidthとheightを指定したからといってCSSで画像表示幅だけを調整すると画像のアスペクト比が狂います。

    こんにちは

    実際のページを見せてもらうことはできますか?

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「投稿の画像が長体となってしまう」には新たに返信することはできません。