Question

I have a page that is using infinite scroll to display a bunch of photos in a 270 x 270 div. I am trying to crop these images down so that they maintain their aspect ratio. I have gotten it to work in css using overflow: hidden and a few tweaks like that. But if the image is smaller I want it to upsize and if it is bigger, I first want to make it smaller.

My best attempt right now is in the img onload event, I run some javascript that does this, but the performance is really bad.

I am thinking that I am going to need to crop the image when the user uploads it, and store a thumbnail version and regular version. My question is has anyone done clientside cropping of images in javascript that was able to still maintain good performance (meaning scrolling did not become jerky because of it)

Answer 1

As I understand you have blocks 270×270 px and you want to fill them completely with images. Try to move images to background and use background-size:cover.

Demo http://jsfiddle.net/heuku/1/

<div style="background-image:url(http://placekitten.com/100/200)"></div>
<div style="background-image:url(http://placekitten.com/200/100)"></div>
<div style="background-image:url(http://placekitten.com/200/200)"></div>

div {
  width:180px;
  height:170px;
  background-repeat:no-repeat;
  background-size:cover;
}

Note that this solution not working in IE8 and below.