ショートコード イラスト一覧のアスペクト比について

[ごはん]

はじめまして、カスタマイズについて質問を失礼します。
ショートコードで設置したイラスト一覧のアスペクト比を1:1（正方形）のまま固定したいのですがうまくいきません。

.shortcode-illust img {
width: 100%;
height: auto;
}

.shortcode-illust img {
width: 100%;
height: auto;
aspect-ratio: 1 : 1;
}

.shortcode-illust img {
width: 100%;
height: auto;
padding-top: 100%;
}

上記いずれも上手くいきません。ブラウザのサイズにより長方形になってしまいます。
他に方法はありますでしょうか？アドバイスを頂けますと幸いです。
よろしくお願いいたします。

WordPress 6.0
canvas on EASEL Ver1.1.0
EASEL Ver1.5.4
Google chrome（windows、android）

[gtgt]

EASELのご利用ありがとうございます。

イラストショートコードで出力するサムネイルのサイズは、
.shortcode-illust img　ではなく
.shortcode-illust.default li　あるいは　.shortcode-illust.small liで制御しています。

これらの要素に対し
height: auto;
aspect-ratio: 1 / 1;
を適用すればよいです。（aspect-ratioは 1 : 1ではなく 1 / 1です）

レスポンシブ対応も含めて、

.shortcode-illust.default li, .shortcode-illust.small li {
height: auto;
aspect-ratio: 1 / 1;
}

@media only screen and (min-width: 768px) {
.shortcode-illust.default li, .shortcode-illust.small li {
height: auto;
aspect-ratio: 1 / 1;
}
}

@media only screen and (min-width: 1030px) {
.shortcode-illust.default li, .shortcode-illust.small li {
height: auto;
aspect-ratio: 1 / 1;
}
}

でしょうか。上手く適用できなければ適宜調整してください。

[ごはん]

ご返信ありがとうございます。
border-radiusを.shortcode-illust imgに適用した流れで指定する場所はimgかと思っておりました。
ご教示いただいたタグで無事固定することができました！

また初歩的な間違いのご指摘もありがとうございます！
10年以上ぶりに個人サイトをと思い立ちましたがわからないことばかりでこちらのテーマとdoさんにとても助けられております。
これからも応援しております！

[投稿者]

投稿