JavaScript图片等比例缩放
<script src="~/Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> function Test() { } Test.prototype = { zoomImg: function () { var imgObj = $("#imgList").find("img"); $.each(imgObj, function (index) { var width = $("#imgDiv_" + index + "").width(); var height = $("#imgDiv_" + index + "").height(); var img = new Image(); img.src = imgObj[index].src; var w = img.width; var h = img.height; if (w >= width) { height = (width * h) / w; } if (h >= height) { width = (height * w) / h; } $("#imgDiv_" + index + "").find("img").css("width", width); $("#imgDiv_" + index + "").find("img").css("height", height); }); } } $(function () { Test.prototype.zoomImg(); }); </script>
<div id="imgList" style="width:1000px; height:400px;"> <div id="imgDiv_0" style="height:400px;width:800px; border:1px solid #e5e5e5;"> <img src="/images/a.jpg" /> </div> <div id="imgDiv_1" style="height:400px;width:800px; border:1px solid #e5e5e5;"> <img src="/images/a.jpg" /> </div> <div id="imgDiv_2" style="height:400px;width:800px; border:1px solid #e5e5e5;"> <img src="/images/a.jpg" /> </div> <div id="imgDiv_3" style="height:400px;width:800px; border:1px solid #e5e5e5;"> <img src="/images/a.jpg" /> </div> <div id="imgDiv_4" style="height:400px;width:800px; border:1px solid #e5e5e5;"> <img src="/images/a.jpg" /> </div> <div id="imgDiv_5" style="height:400px;width:800px; border:1px solid #e5e5e5;"> <img src="/images/a.jpg" /> </div> </div>
将来的你,一定会感谢现在努力的自己!