Here is the solution with jQuery -
Fiddle Demo: http://jsfiddle.net/dipaks2011/3yfgk/
CSS //to center and vertically middle align the image
HTML
Fiddle Demo: http://jsfiddle.net/dipaks2011/3yfgk/
CSS //to center and vertically middle align the image
div{
width: 140px;
height: 140px;
border: 1px solid #f00;
text-align: center;
vertical-align: middle;
display: table-cell;
}
Note: display: table-cell; supports IE8+HTML
<div>
<img src="http://www.htmlgoodies.com/img/2010/11/jquery.jpg" />
</div>
jQuery
<script type="text/javascript">
$(function(){
var max_size = 130;
$("div img").each(function() {
if ($(this).height() > $(this).width()) {
var h = max_size;
var w = Math.ceil($(this).width() / $(this).height() * max_size);
}
else{
var w = max_size;
var h = Math.ceil($(this).height() / $(this).width() * max_size);
}
$(this).css({'height': h, 'width': w});
});
});
</script>
nice coding
ReplyDeletedsi games