Force reszing of images

Question

I'm trying to change the size of a list of images so that they are all the same size. The image size needs to be 233px by 250px, which may mean forcing an image to be larger or smaller than its original size. At the moment the image is just being cropped to 233px by 250px, resulting in larger original photos losing content at the bottom.

Heres the current 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;

Any help?

Answer 1

Specify the width and height like below.

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>

Answer 2

Try below code, use of div might solve your problem :

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

Set the width and height to 100% instead of auto like this:

width: 100%; 
height: 100%;