一、需要的包
二、实现思路
1、先用定义两个style,一个是横向显示的class,一个是纵向显示的class
横向class
.imgHorizontalShow {width: 800px;height: 450px;border:1px solid #ccc;}纵向class.imgVerticalShow {width: 450px;height: 800px;border:1px solid #ccc;}默认是横向显示2、在编写相应的js脚本1)得到图片的dom:var img = $("#img1");2) 创建一个临时Image对象var tempImage = new Image();3)得到图片src属性的值tempImage.src = img.attr("src");4)此时就可以得到图片的真实长和高了alert("width: " + theImage.width);alert("height: " + theImage.height);5)根据图片的 长宽大小来设置图片的 显示方式(横向或者纵向)if(tempImage.width > tempImage.height) { //横向显示img.removeClass("imgVerticalShow").addClass ("imgHorizontalShow");} else { //纵向显示img.removeClass("imgHorizontalShow").addClass("imgVerticalShow");}
三、源代码
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<script type="text/javascript">
$(function() {
var img = $("#img1");
var tempImage = new Image();
tempImage.src = img.attr("src");
if(tempImage.width > tempImage.height) { //横向显示
img.removeClass("imgVerticalShow").addClass("imgHorizontalShow");
} else { //纵向显示
img.removeClass("imgHorizontalShow").addClass("imgVerticalShow");
}
//alert("width: " + theImage.width);
//alert("height: " + theImage.height);
});
</script>