画像の高さ指定が、無効になります
-
こんにちは。
ワードプレス記事の画像の高さ指定が、無効になります。以下の LightningのCSSの important指定によって、
.wp-block-image img:not([style*=object-fit]) {
height: auto!important;
}以下のスタイル属性で指定した高さ(height:300px)が、
無効になります。img decoding=”async” src=”https://www.xxxx.net/wp-content/uploads/2023/08/xxxx.png” alt=”xxxx” class=”wp-image-72365″ style=”height:300px” height=”300″
imgタグのstyle属性で、画像の高さを決定できるように
していただけたらと思います。以下のバージョンを使っています。
WordPress 6.3.1
Lightning 15.10.6
-
6.3での仕様変更により、これを無効にすると6.2以前で配置した画像ブロックでサイズ指定してあった場合、モバイル画面で縦長に画像が潰れるという不具合が発生するためこの処理を追加しています。
基本的に横方向のmaxを指定する事はよくあると思いますが比率を維持するためには高さの指定は自動にするのが一番表示崩れを抑えられるためこの仕様にしています。
ちなみに、WordPressの記事の編集画面から高さを指定した場合は該当のCSSはあたらないので普通に高さ指定を効かせる事もできます。
どのような手順で配置すると不都合が発生しますか？
確かに高さを指定して幅を自動だとご指摘の通りになります。
しかしながら、”アスペクト比が元のサイズ” を希望する場合、画面の横幅はレスポンシブで可変するため、高さを自動にしないと元のアスペクト比を維持する事ができません。
例えば
アスペクト比：元のサイズ
幅：自動 px
高さ：800 px
解像度：フルサイズで画面サイズを小さくした時、height: auto!important; の指定を無効にすると画像の比率が維持されずに潰れます。これが指定を追加している理由です。
アスペクト比を元のサイズにしたい場合は、高さを指定するのではなく、横幅で調整してください。
- The topic ‘画像の高さ指定が、無効になります’ is closed to new replies.
