カスタムフィールドで選択した写真にaspect-ratioが効かない

Question

実現したいこと

カスタムフィールドで選択した写真にaspect-ratioを効かせたい

発生している問題・エラーメッセージ

カスタムフィールドで選択した写真を以下のようにphpで呼び出してscssを使ってaspect-ratioを効かせようとしたが効かない

   <img src="<?php echo CFS()->get("thumbnail");?>" alt="" >

下の写真のように左が正しいサイズですが右のようにaspect-ratioが反映されず大きさが違うのがわかります。

試したこと

・htmlに直接style=""のように書いた。aspect-ratio以外はしっかり反映されるがaspect-ratioだけは反映されない。

・style.cssにscssで書いた内容が反映されていることも確認できた。
またstyle.cssからcssを少しいじってみてその内容がwebページに反映されていることも確認できたためやはりaspect-ratio自体が使えないのかなと自分の中で思ってる状態です。

・wordpressの管理画面の画像編集から画像のトリミングで縦横比を指定してトリミングを行ったところ写真のように元と同じ大きさになりました。
ただ画面サイズによってアスペクト比を変えたい場合このやり方だと厳しいと思うのでやはりcssが効かない問題を解決しなければならないのでしょうか。

Answer 1

完成コード例

親要素の方にaspect-ratioを書いてみてはいかがでしょうか？

&__img {
  aspect-ratio: 3 / 2;
  width: 300px; // 例
  height: auto; // 例

  & > img {
    object-fit: cover;
    height: 100%
    width: 100%;
  }
}

質問者様のコードですと、親要素に合わせてwidth / heightともに100%とサイズ指定しているので、そちらが優先されています。

ダメな例

例えば以下のように書いた場合、200pxの正方形となり、3:2のアスペクト比にはなりません。

div {
  aspect-ratio: 3 / 2;
  width: 200px;
  height: 200px;
}

Comments

[shin_s14]

ご回答ありがとうございます。
Cocode様のご指摘通り親要素に高さと横幅、aspectの指定をしましたがやはり画像のサイズは変わらないままです。また他の要素のcssをいじったら変更したcssが適応されるので画像のサイズだけcssが効かない状態です。

[Cocode]

提示していただいているコードのみだとこれ以上の判断が難しいので、もし可能でしたらサイトのURLなどを共有していただいた方がいいかもしれません＞＜

ちなみにブラウザの開発者ツールで見ると、aspect-ratioはどういった状態になっていますか？

・表示はされているけど打ち消し線で消されている
・表示はされているけどスタイルが効いていない
・表示さえされていない

[shin_s14]

今、GoogleChromeで確認したところ画像にaspect-ratioが反映されていることが確認できました。safariのwordpress管理画面上だと反映されていないことは変わらずです。実際に画像にcssが効いててもwordpressの管理画面上だと反映されないという認識でいいのでしょうか。