跳到主要内容

jquery 根据屏幕宽度改变图片宽度

· 阅读需 2 分钟
一介布衣
一介布衣
全栈开发者

投稿人: 海涛

var clientWidth = parseInt(document.body.clientWidth);
    $('.detail_content img').each(function(i,n){
        $(this).on('load',function(){
            var width = parseInt(this.width);          //图片实际宽度
            var height = parseInt(this.height);
            var outwidth = width;                       //图片输出宽度
            var outheight = height;

            var rateWidth = (clientWidth-20) / width;
            
            if(width > clientWidth){
                outwidth = clientWidth-20;
                outheight = height * rateWidth;
            }
            $(this).attr("width",outwidth);
            $(this).attr("height",outheight);
        })        
    });

上面代码实现的功能就是根据屏幕宽度调节图片宽度,给用户最好的浏览体验.

这些基础标签和页面技巧，真正决定的是语义和维护成本​

围绕「jquery 根据屏幕宽度改变图片宽度」这种前端基础问题，很多人第一反应都是“能显示就行”。但当页面需要兼顾可访问性、搜索语义、样式维护和多人协作时，标签怎么选、结构怎么写、调试顺序怎么排，都会直接影响后面的可读性和修改成本。基础主题之所以值得补全，恰恰是因为它们最容易在忙的时候被草草带过。

今天再看仍然值得记住的点​

  • 优先让语义表达和结构层次先成立，再去补样式或脚本层的技巧，这样页面才更耐改。
  • 遇到浏览器表现不一致时，先从 DOM 结构、默认行为和工具面板证据入手，比直接猜 CSS 或脚本要稳得多。
  • 基础标签一旦进入项目规范，后面能省下的是长期沟通和返工，而不只是某一页的显示问题。