Принудительное удаление изображений

Question

Я пытаюсь изменить размер списка изображений, чтобы они были одинакового размера. Размер изображения должен быть 233px на 250px, что может означать, что изображение будет больше или меньше его первоначального размера. На данный момент изображение просто обрезается до 233 пикселей на 250 пикселей, в результате чего большие оригинальные фотографии теряют контент внизу.

Heres текущий CSS:

float: left; 
max-width: 233px; 
max-height: 250px; 
width: auto; 
height: auto; 
border: 2px solid #333333; 
margin: 0px 10px 0px 0px; 
background: none repeat scroll 0% 0% #333333; 
transition: all 0.25s ease 0s; 
float: left; 
overflow: hidden; 
position: relative; 

Любая помощь?

Answer 1

Установите width и height в 100% вместо auto так:

width: 100%; 
height: 100%; 

Answer 2

Попробуйте ниже код, использование DIV может решить вашу проблему:

HTML:

<div><img src="http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg" alt=""> 
</div> 
<div><img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt=""> 
</div> 
<div> 
    <img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt=""> 
</div> 

CSS:

div { 
    width: 233px; 
    height: 255px; 
} 

img { 
    width: 100%; 
    height: 100%; 
    padding: 1%; 
    background: red; 
} 

JSFiddle: https://jsfiddle.net/nikdtu/gscerdLn/

Answer 3

Укажитеwidth и height, как показано ниже.

img{ 
 

 
max-width: 233px; 
 
max-height: 250px; 
 
width: 233px; 
 
height: 250px; 
 
border: 2px solid #333333; 
 
margin: 5px; 
 
background: none repeat scroll 0% 0% #333333; 
 
transition: all 0.25s ease 0s; 
 
float: left; 
 
overflow: hidden; 
 
position: relative; 
 
    }

<div> 
 
    <img src="http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg" alt=""> 
 

 
<img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt=""> 
 

 
    <img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt=""> 
 
</div>