resize + crop image

Question

I have a couple of pictures with different aspect ratio and different orientation (vertical/horizontal).

I'd like to show them in a grid, with every block of the grid 200px wide and 200px heigh. I know how to create the grid ("float: left; width: 200px; height: 200px").

How could I put the images in there? I'd like to resize them so that the SHORTEST side becomes the 200px of the block, and "crop" (probably with "overflow: hidden"?) the longer side to the same 200px.

Is this possbile with only CSS ? If not, how would you solve it? Resize server side so that the longest side is always "correct" (200px) ?

What I have so far ...

<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

I think it's not possible to determine the shortest dimension (width or height) via CSS, so you need to resize by the same dimension every time. But everything else is possible via CSS only:

<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;
}