css - Pinterest、ピン CSS スタイル

Question

ピン スタイルの CSS を正しく取得しようとしています。私は正確な Pinterest ピン スタイルを取得しようとしています。つまり、画像がコンテナ/ボックスを埋めていて、その下に統計があります...

下の画像は、私が作成しようとしている Pinterest ピンを示しています。画像がコンテナ/ボックスを埋めるために必要なCssを知っている人はいますか?

ありがとうございました

Answer 1

画像がコンテナ要素と同じ幅であることを確認するだけです。コンテナーの幅を画像と同じ幅に設定し、コンテナーにパディングがないこと、または画像の上部または側面に余白がないことを確認してください。

<div class="container">
  <img width="200">
  <div class="meta">
    text
  </div>
</div>

.container { width: 200px; padding: 0; }
.container img { margin: 0; }

Pinterest のコードはもう少し複雑ですが、いつでもインスペクタを使用して具体的に何をしているかを確認できます。