Pinterest，Pin CSS风格

Question

我正试图获得针对Pin Style的CSS。我正在尝试获得精确的Pinterest Pin Style，这意味着图像填充容器/盒子，下面有统计数据......

下面的图片显示了我正在尝试制作的Pinterest Pin。有没有人知道图像填充容器/盒所需的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的代码变得有点复杂，但你总是可以使用检查器来看看他们正在做什么。