css - Pinterest，固定 CSS 样式

Question

我正在尝试正确获取 Pin Style 的 CSS。我正在尝试获得确切的 Pinterest Pin 样式，这意味着图像正在填充容器/盒子，下面是统计信息......

下图显示了我正在尝试制作的 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 的代码变得有点复杂，但你总是可以使用检查器来查看他们具体在做什么。