根据设备不同，加载不同尺寸图片

最新推荐文章于 2023-12-20 14:44:30 发布

comeonstone

最新推荐文章于 2023-12-20 14:44:30 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： js jquery bootstrap框架应用文章标签： js bootstrap 自适应图片选择前端开发

本文链接：https://blog.youkuaiyun.com/comeonstone/article/details/50518812

js 同时被 3 个专栏收录

45 篇文章

订阅专栏

jquery

33 篇文章

订阅专栏

bootstrap框架应用

4 篇文章

订阅专栏

本文探讨了在自适应网站中如何处理图片加载，尤其是对于banner图片的挑战。通过引入bootstrap和jQuery，利用window.resize事件监听浏览器窗口大小变化。文章提出疑问，是否可以将图片作为div的背景，并讨论了宽度自适应情况下，不设定高度的图片显示问题。作者计划在后续实践中进一步探索解决方案。

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

针对自适应网站，图片是最难把控的，特别是banner类型的大图片。

js：

$(function(){
	//根据不同浏览设备，加载不同图片
	pic_html();
	function pic_html(){
		if($(window).width()<720){
			$(".pic-html").attr("src","img/pic-html-mobile/banner3.png");
		}else{
			$(".pic-html").attr("src","img/pic-html/banner3.png");
		}
	}
	//当调整浏览器窗口的大小时，发生 resize 事件
	$(window).resize(function(){
		pic_html();
	})
})

html：（）

加载bootstrap.min.css、jquery.js、bootstrap.min.js、以及上述js

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <img style="width: 100%;" class="pic-html" src="img/pic-html/banner3.png" />
        </div>
    </div>
</div>

总结：$(window).width()得窗口大小

$(window).resize():当调整浏览器窗口大小时，发送resize事件

疑问：可将图片放于div的background中吗？

思考：宽度可以自适应，高度呢，不设置能够显示吗

之后实际操作中再实际操作。