Resize + Crop Image

Question

I have a couple of images with different aspect ratios and different orientations (vertical / horizontal).

I would like to show them in a grid, with each grid block being 200 pixels wide and 200 pixels wide. I know how to create a grid ("float: left, width: 200px; height: 200px").

How can I put images there? I would like to resize them so that the SHORTEST side becomes 200px of the block, and "crop" (possibly with "overflow: hidden"?) The longer side is also 200px.

Is this possible with just CSS? If not, how would you resolve it? Resize the server so that the longest side is always “right” (200 pixels)?

What am I still ...

<div class="grid"> <div class="item"> <img src="pic1.jpg"/> </div> <div class="item"> <img src="pic1.jpg"/> </div> <div class="item"> <img src="pic1.jpg"/> </div> <div class="item"> <img src="pic1.jpg"/> </div> <div class="item"> <img src="pic1.jpg"/> </div> <div class="item"> <img src="pic1.jpg"/> </div> <div class="item"> <img src="pic1.jpg"/> </div> .... </div> .grid { width: 1000px; } .item { width: 200px; height: 200px; float: left; } 

Answer 1

You can resize the client portion of images as follows:

 img { height: 200px; } 

But you need JavaScript to determine which one is shorter:

 function resizeImg(img) { var h = img.height; var w = img.width; if (h > w) { img.style.width = "200px"; } else { img.style.height = "200px"; } } 

On the right track with overflow: hidden . Then simply set the margin-height or margin-width image to ( 200 - sideLength ) / 2 .

Personally, I would do it all on the server side. Browsers are not the best when scaling images. This statement was more true 5 years ago than it is now - they seem to be doing a very good job these days, so the point can be debatable. But you can also reduce the download size by returning pre-compressed and cropped thumbnails from the server. I wrote a thumbnailer in C # that wrote thumbnails on disk, so he needed to process the image if it had never been requested before, otherwise it would return the saved image.

Answer 2

I think it is not possible to determine the shortest size (width or height) using CSS, so you need to resize the same size every time. But everything else is only possible with CSS:

 <figure> <img src="someimg.png" /> </figure> 

 figure { // crop padding: 0; height: 200px; overflow: hidden; // grid align float: left; margin: 0 1em 1em 0; } img { // resizing by width width: 200px; } 

Answer 3

If you want to scale the image proportionally to the container, see: http://haslayout.net/css-tuts/CSS-Proportional-Image-Scale