<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>原創</title>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script language="javascript">
</script>
<style type="text/css">
.content{
width: 400px;
height: 400px;
border:1px solid green;
overflow: hidden;
}
</style>
<script type="text/javascript">
jQuery.fn.LoadImage = function(obj) {
var w = $(obj).width();
//alert (w);
var h = $(obj).height();
return this.each(function() {
var img_w = $(this).width();
//alert(img_w);
var img_h = $(this).height();
//alert(img_h);
if ((img_h/img_w)<(h/w)) {
var newW = (h * img_w) / img_h;
var mleft = -(newW-w)/2
$(this).css({
"width": newW,
"height": h,
'margin-left':mleft
}); //設定縮放後的寬度和高度
}else if ((img_h/img_w)>(h/w)) {
var newH = (w * img_h) / img_w;
var mtop = -(newH-h)/2
$(this).css({
"width": w,
"height": newH,
"margin-top":mtop
}); //設定縮放後的寬度和高度
}
});
}
</script>
</head>
<body>
<div class="content"><img src="1.jpg"/></div>
<div class="content"><img src="2.jpg"/></div>
<div class="content"><img src="3.jpg"/></div>
<div class="content"><img src="4.jpg"/></div>
<script type="text/javascript">
$(window).load(function(){
$('.content img').LoadImage('.content');
});
</script>
</body>
</html>
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)