What is the proper way to center and crop an image using bootstrap (with jquery if needed)

Question

I use bootstrap and I would like to display thumbnails of images from various sizes.

I would like the thumbnails to have all the same size (let's say width="col-md-2" wide and height="100px" ) and be centered and cropped.

The thumbnails have to be clickable in some way (to open the full size image or a gallery view).

The solution can use a mix of bootstrap styling or jquery or jquery components .

Ideally, I would like the code to look like this :

<div class="row">
    <div class="..." style="...">
       <img src="path/to/img1.png" class="..." style="..."/>
       <img src="path/to/img2.png" class="..." style="..."/>
       ...
    </div>
</div>

Or something like this :

<div class="row">
    <div class="..." style="...">
       <div class="..." style="...">
          <img src="path/to/img1.png" class="..." style="..."/>
       </div>

       <div class="..." style="...">
          <img src="path/to/img2.png" class="..." style="..."/>
       </div>
    </div>
</div>

(With the jquery initialization if necessary)

Answer 1

Try this..

.row {
  max-height:100px;
  overflow:hidden;
}

img {
   width:100%;
   min-height:100px;
}

Demo: http://bootply.com/92024

Answer 2

I don't know if you mean these examples below by "cropping."

Original photo

Cropped in fiddle

border-color: white;
border-radius: 63px;
border-style: solid;