image center horizontal vertical

image center horizontal vertical keep ratio

by thanhansoft

HTML

<div class="imageHolder">
    <img src="http://lorempixel.com/g/800/400">
</div>
<div class="imageHolder">
    <img src="http://lorempixel.com/g/800/800">
</div>
<div class="imageHolder">
   <img src="http://lorempixel.com/g/400/800">
</div> 

<div class="crop">
   <img src="http://lorempixel.com/g/400/800">
</div>
<div class="crop">
  <img src="http://lorempixel.com/g/700/500">
</div>
<div class="crop">
   <img src="http://lorempixel.com/g/300/800">
</div>

CSS

.imageHolder {
    width: 300px;
    height: 300px;
    background-color:#CCCCCC;
    margin:10px;
    display:inline-block;
    float:left;
    position:relative;
}
.imageHolder img {
    max-width: 100%;
    max-height:100%;
    margin: auto;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}



.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;display:inline-block;
}

.crop img {
    width: 400px;
    height: 300px;
    margin: -75px 0 0 -100px;
}