Search code examples
csssasslesspinterest

Pinterest, Pin CSS Style

I'm trying to get the CSS for a Pin Style right. I'm trying to get the exact Pinterest Pin Style, that means that the image is filling the container/box and below there are the stats...

The Image below shows a Pinterest Pin that i'm trying to make. Does anyone know the Css that is required for the image to Fill the container/box ?

Thank you

Pinterest Pin Style

Solution

  • You just need to make sure your image is the same width as its container element. Set the width on your container to the same width as your image and make sure there is no padding in your container or margins on the top or sides of your image.

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

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

    Pinterest's code gets a bit more complex but you can always use an inspector to see what they're doing specifically.