jquery实现图片按比例缩放示例_jquery
Release： 2016-05-16 16:42:47
Original
1053 people have browsed it
<html>
<title></title>
<head></head>
<style>
.thumbnail{overflow:hidden;width:400px;height:240px;}
</style>
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script language="javascript">
$(function(){
/* 图片不完全按比例自动缩小 by zwwooooo */
$('#content div.thumbnail img').each(function(){
var x = 400; //填入目标图片宽度
var y = 240; //填入目标图片高度
var w=$(this).width(), h=$(this).height();//获取图片宽度、高度
if (w > x) { //图片宽度大于目标宽度时
var w_original=w, h_original=h;
h = h * (x / w); //根据目标宽度按比例算出高度
w = x; //宽度等于预定宽度
if (h < y) { //如果按比例缩小后的高度小于预定高度时
w = w_original * (y / h_original); //按目标高度重新计算宽度
h = y; //高度等于预定高度
}
}
$(this).attr({width:w,height:h});
});
});
</script>
<body>
<div id="content">
<div id="thumbnail" class="thumbnail" >
<img id="web" src="./midle.png"/ alt="jquery实现图片按比例缩放示例_jquery" >
</div>
</div>
</body>
</html>Copy after login
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
