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

最新推荐文章于 2021-08-03 21:01:47 发布

cjchuchu1121

最新推荐文章于 2021-08-03 21:01:47 发布

阅读量3.2k

点赞数

分类专栏： JS 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/cjchuchu1121/article/details/84731465

版权

JS 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript确保轮播图片在手机横屏和竖屏状态下都能自适应屏幕大小，通过动态调整图片宽度和高度，实现了良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于某些原因，图片的宽度不能设置成自适应的，想要轮播图片自适应手机横屏竖屏，只能用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>