CODEWITHSUNDEEP
csslayout
retailevolved
retailevolved

Reputation: 485

Why does pinterest set the height of an image instead of the width?

I have been studying the page code of the Pinterest website lately to learn some design tricks in CSS. One thing I observed is that they set the height of each of their images using a CSS style. This is odd to me because it is clear that they are all being resized in order to have a uniform WIDTH of 192px. Is there a technical reason for setting the height instead of the width?

Example:

<img src="http://media-cache-ec8.pinterest.com/upload/30962316158222159_nQdVRIXP_b.jpg" alt="Summer camp" class="PinImageImg" style="height: 163px;">

Upvotes: 1

Views: 889

Answers (2)

xan
xan

Reputation: 4696

Pinterest uses a JQuery masonry. http://masonry.desandro.com/ Now, if you try using masonry for floating for objects as Pinterest does; there comes a point where your objects won't arrange no matter how much you zoom in or zoom it. If you play around by setting width for the objects; you'll soon realize the maths behind "Pinterest's 192px". After giving reasonable padding and margin, you'll HAVE to assign this particular width for the proper function of the arrangement. I've worked on a developing a website similar to Pinterest and it took us over a week to decrypt the logic behind "Pinterest's 192px width"

Upvotes: 5

Nicol&#225;s Torres
Nicol&#225;s Torres

Reputation: 1345

The "aspect ratio" of the images isn't always optimal. Sometimes when you resize to X height and Y width, the resulting image is wider or higher than expected depending on the width/height ratio. If you set a fixed height in css you make sure it will never be bigger than that (and your design wont "break")

Upvotes: 0

Related Questions