CODEWITHSUNDEEP
javascriptjqueryimage
Davey
Davey

Reputation: 1093

How does Pinterest keep their image height proportionate

I want to load in a bunch of random images (of varying widths and heights) to a column. The column will have a fixed width, and the height will have to be cropped off proportionally to keep the image in it's original height to width ratio. (similar to how Pinterest structures their boards.)

Anyone know how this could be accomplished with Javascript or JQuery?

Upvotes: 3

Views: 150

Answers (1)

miguelarcilla
miguelarcilla

Reputation: 1456

You can just use css:

img.autosize {
    width: 500px; /*Specify your width here*/
    height: auto;
}

This will keep the images in your site to a fixed width (use max-width in case you don't want all of them to be the exact same width) and the height will adjust itself accordingly to maintain aspect ratio.

Of course, if you want to use javascript or jQuery, you can set the css properties in your script. This is just a hassle-free way to do it.

Upvotes: 3

Related Questions