css - Pinterest，固定 CSS 样式

Question

我正在努力使 Pin 样式的 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 的代码有点复杂，但您始终可以使用检查器来查看他们具体在做什么。