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

VWSとは フォーラム VK Blocks・Pro [ 解決済 ] アイキャッチに入れた画像が四隅ピッタリに投稿リストブロックに表示がしたい

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

  • このトピックには7件の返信、2人の参加者があり、最後にNakashimaにより2年、 7ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #64241

    Nakashima
    参加者

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

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

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

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

    #64245

    うなこ
    モデレーター

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

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

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

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

    #64246

    Nakashima
    参加者

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

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

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

    #64247

    うなこ
    モデレーター

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

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

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

    /* 投稿リストの画像 */
    .vk_post .vk_post_imgOuter:before {
        padding-top: 〇〇%;
    }
    • この返信は2年、 7ヶ月前にうなこが編集しました。
    #64272

    Nakashima
    参加者

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

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

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

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

    #64273

    Nakashima
    参加者

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

    #64275

    うなこ
    モデレーター

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

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

    #64453

    Nakashima
    参加者

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

8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • このトピックに返信するにはログインが必要です。