place product image at bottom of the box

CODE

I want image to aligned at bottom of the box. There will be product images which are coming from backend and there is not fix size for it.

HTML

<ul>
  <li><img src="http://ift.tt/1NcEW1M" alt="" /></li>
  <li>
    <img src="http://ift.tt/1DFbh9E" alt="" />
  </li>
</ul>

CSS

ul {
  list-style: none;
}
li {
  float: left;
  width: 276px;
  text-align: center;
  border:1px solid #ccc;
  height: 276px;
  margin: 5px
}
img {
  vertical-align: bottom
}