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

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

原创最新推荐文章于 2021-08-03 21:01:47 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JS 专栏收录该内容

5 篇文章

订阅专栏

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

部署运行你感兴趣的模型镜像

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

您可能感兴趣的与本文相关的镜像