[ 解決済 ] アイキャッチに入れた画像が四隅ピッタリに投稿リストブロックに表示がしたい

[Nakashima]

「投稿リストブロック」について質問です。
アイキャッチにいれた写真が「投稿リストブロック」に表示されますが、
若干画像が切り取られて（かけてしまいます）

デベロッパーツールを見ますと、入れる写真の大きさに寄って切り取られ方が違うように見えます。
205×137のときもあれば、205×115のときもあります。

何がしたいのかというと、
アイキャッチに入れた画像の通りで四隅ピッタリに投稿リストブロックに表示がしたいです。

画像のサイズを固定にすれば良いのか、CSSで解決できるのか。
ご教主いただけますと幸いです。

[うなこ]

画像のサイズを固定にすれば良いのか、CSSで解決できるのか。

アイキャッチ画像の縦横比率がそれぞれちがう画像を入れていて、ぴったり表示したいということであっていますか。
そうだとすると、画像のサイズを固定にするのがいいかなと思います。

画像のサイズを固定にしていただき、cssで調整する形でいかがでしょうか。

もし質問の意図と違っておりましたら教えてください。

[Nakashima]

うなこさん返信ありがとうございます。

アイキャッチ画像の縦横比率がそれぞれちがう画像を入れていて、ぴったり表示したいということであっていますか。
そうだとすると、画像のサイズを固定にするのがいいかなと思います。

＞縦横比大きさ共に固定で作れますが、作った画像が「投稿リストブロック」で表示すると、少し内に入ってしまい画像が欠けてしまうんです。
あとは、CSSの問題のように見えるのですが。
該当のCSSが見つからずです。

[うなこ]

返信ありがとうございます。

CSSは以下でいかがでしょうか

〇〇の部分は現在62%となっておりますので、この数字を大きくして調整していただければ、隠れている画像の部分が表示されるかなと思います。

/* 投稿リストの画像 */
.vk_post .vk_post_imgOuter:before {
    padding-top: 〇〇%;
}

• この返信は2年、 8ヶ月前にうなこが編集しました。

[Nakashima]

うなこさん返信ありがとうございます。
帰宅が遅れ返信が遅くなり申し訳ございません。

検証いたしまたところ、下記内容で解消できました。
ありがとうございます。大変助かりました。

画像サイズ指定　300px×200px

.vk_post .vk_post_imgOuter:before {
padding-top: 67%;
}

[Nakashima]

すいません。ベストアンサーをつけたいのですが、付け方がわからないです。
ご存知の方がいたらおしえてください。

[うなこ]

モデレーター以上のユーザーはスタッフになりますのでベストアンサーが付けれなくなっております。

解決できて安心いたしました、今後ともよろしくお願いいたします！

[Nakashima]

返信漏れしておりました。すいません。
承知しました。ありがとうございました。

[投稿者]

投稿