[ 解決済 ] カード表示でアイキャッチ画像の上下が切れる

[HT]

■ WordPress のバージョン
5.8.3

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
14.13.6

■ Pro Unit のバージョン
0.14.0

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ プラグインの種類・バージョン
VK Blocks Pro 1.21.0

■ 期待する動作
VK BlocksPro投稿リストの表示タイプを「カード」にした際、アイキャッチ画像全体を表示したい。
併せて、投稿ページのアーカイブ設定を「カード」にした場合も同様にしたい。

■ 自分で試した事
下記過去記事で同現象に対処できそうなCSSが回答にあったので試したのですが解消しませんでした。
（試した過去記事）「Lightningアーカイブ設定での画像サイズ」

■ 症状が発生するブラウザ
chrome

■ 実際の症状
VK BlocksPro投稿リストの表示タイプを「カード」にしたところ、アイキャッチ画像の上下が切れてしまいます。
投稿ページもアーカイブ設定で表示タイプを「カード」した場合も同じく切れます。

[対馬 俊彦]

参考情報です。

ご質問者と同じバージョン・スキンで試してみました。

2020年4月1日 8:29 PM #35759 でうなこさんが回答された以下の CSS を追加したら、アイキャッチ画像が切れずに表示できています。

.card-post:not(.card-horizontal) .vk_post_imgOuter {
background-size: contain;
background-repeat: no-repeat;
}

うまくいかないとすると、上記の CSS が反映されない原因がなにかあるのだと思います。

可能であれば、アイキャッチ画像の上下が切れてしまうサイトの URL を提示していただくと回答が得られやすいです。

【追記】
上記 CSS によりアイキャッチ画像は切れずに表示されるようになりますが、アイキャッチ画像の左右(または上下)に余白が表示されます。もしかしたら、その余白もなんとかしたいということでしょうか？

• この返信は2年、 10ヶ月前に対馬 俊彦が編集しました。

[HT]

対馬 様

ご回答ありがとうございます。
質問しましたHTと申します。

結果的にできました！
表示タイプが「カード（線なし）」になっており、「カード」にしたところ期待通りの表示になりました。
「カード（線なし）」では指定のCSSが効かなかったようです。
お騒がせいたしました。

とても助かりました。
ありがとうございました。

[対馬 俊彦]

> 表示タイプが「カード（線なし）」になっており

なるほど…

[ 解決済 ] とのことですが、今後どなたかが検索してこのトピックをご覧になるときに役に立つかもしれないので、追加情報として載せておきます。

.card-post:not(.card-horizontal) .vk_post_imgOuter {
background-size: contain;
background-repeat: no-repeat;
}

表示タイプによって、上記 CSS の1行目の記述を以下の通り書き換えればオッケーです。

■表示タイプが「カード」の場合
.card-post:not(.card-horizontal) .vk_post_imgOuter {

■表示タイプが「カード（線なし）」の場合
.card-noborder .vk_post_imgOuter {

■表示タイプが「カード（インテキスト）」の場合
.card-intext .vk_post_imgOuter {

■表示タイプが「カード（水平）」の場合
.card-horizontal .vk_post_imgOuter {

■表示タイプが「メディア」の場合
.media .vk_post_imgOuter {

■表示タイプが「Lightning 標準」の場合（「メディア」の場合と記述は同じ）
.media .vk_post_imgOuter {

[HT]

対馬 様

HTです。

他の表示タイプのCSSを調べようと思っていたところでして、タイムリーに助かりました。
本当にありがとうございました！

[投稿者]

投稿