Миниатюра части изображения при сохранении пропорций

Question

Я пытаюсь создать эскизы из некоторых изображений, каждый из которых не обязательно имеет одинаковый размер у остальных.

Вот Fiddle с моим текущим кодом. Я читал на некоторых других сайтах, и даже здесь я просто должен установить ширину и высоту класса изображения, а затем применить свойство overflow: hidden, но это, похоже, не работает. Он по-прежнему меняет соотношение сторон изображения. Я знаю, что могу просто удалить свойство высоты или ширины, но я просто хочу сделать обрезку изображения размером 100x100. Я попробовал клип: rect(), но не мог понять, как заставить его работать. В идеале, я хотел бы обрезать 100x100 из центра полноразмерного изображения, но, используя клип, я не думаю, что могу это сделать, если размеры моих изображений не все одинаковые.

.thumbnail { 
    overflow:hidden; 
    width:100px; 
    height:100px; 
    padding:10px; 
    margin-left:10px; 
    margin-right:10px; 
    margin-top:10px; 
    margin-bottom:10px; 
    border:10px solid #EEEEEE; 
} 

Answer 1

с помощью CSS и HTML:

Первое решение:

HTML:

<div class="imageFrame"> 
    <img src="your_path" alt="thumb" /> 
</div> 

CSS:

.imageFrame { 
    overflow:hidden; 
    width:100px; 
    height:100px; 
    padding:10px; 
    margin-left:10px; 
    margin-right:10px; 
    margin-top:10px; 
    margin-bottom:10px; 
    border:10px solid #EEEEEE; 
    position:relative; 
} 

.imageFrame img{ 
    position: absolute; 
    top:50%; 
    left:50%; 
    margin-left: -50px; 
    margin-top: -50px; 
    display: block; 
} 

Второе решение:

здесь вам придется использовать некоторые JS, чтобы добавить динамически путь URL изображения в <div class="imageFrame".

HTML:

<div class="imageFrame" style="background-image: url('your_path');"></div> 

CSS:

.imageFrame { 
    overflow:hidden; 
    width:100px; 
    height:100px; 
    padding:10px; 
    margin-left:10px; 
    margin-right:10px; 
    margin-top:10px; 
    margin-bottom:10px; 
    border:10px solid #EEEEEE; 
    position:relative; 
    background-repeat: no-repeat; 
    background-position: center center; 
}