图片自适应手机横屏竖屏的宽高

由于某些原因，图片的宽度不能设置成自适应的，想要轮播图片自适应手机横屏竖屏，只能用js来控制图片的大小了。

 

<div id="mgg" style="width: ${ width }px;">
	<ul class="tag-pic" style="width: 100000px;">
		<c:forEach var="ad" items="${ adList }" >
			<li>
				<img width="${width }" height="${height }" src="${ ad.url }">
			</li>
		</c:forEach>
	</ul>
</div>

 

<script type="text/javascript">
//默认值
Mgg = {
	setWidth : '${width }',
	setHeigth : '${height }',
	step : $(document).width() == '' ? 324 : parseInt($(document).width())+4,
	imgs : 3		//图片的数量
}; 

Mgg.changeSize() = function(){
	//取当前屏幕宽度
	var screenWidth = $(document).width();
	Mgg.step = screenWidth == '' ? 324 : parseInt(screenWidth)+4;
	//计算高度
	var height = (Mgg.setHeigth / Mgg.setWidth) * screenWidth;
	$('#mgg').css("width", screenWidth);
	$('#mgg').css("height", height);
	$('#mgg .tag-pic').width((Mgg.imgs + 2)*Mgg.step);
	$('#mgg .tag-pic img').each(function(){
		$(this).attr("width", screenWidth);
		$(this).attr("height", height);
	});
};

$(window).resize(function(){
	Mgg.changeSize();
});

$(document).ready(function(){
	//图片尺寸
	Mgg.changeSize();
}); 
</script>