简易的 jQuery 自适应解决方案

现在很多网站都使用响应式页面，但是很多时候，文章中的图片、Flash、iframe 等的元素是需要设置高宽的，响应式的页面需要将这些元素缩小的时候会很麻烦，因为单纯的 CSS 没法做到等比例缩放。

那么我们就只能依赖 jQuery 来实现了，以我的博客为例。我的博客是最简单的一个响应式页面，当浏览器窗口宽度变小时候页面也会自动变小，过去对图片的解决办法是只设置 width 留空 height，然后 CSS 设置 .post 一个 max-width:100%;。这样的方法最简单，但是只能用于 img、video这些会自动等比例适应的元素。

我们先来分析一下页面结构，我的博客直接就是 .post 作为内容窗口，这个元素会跟随浏览器窗口变化而变化，而里面的内容都不能超出这个窗口的宽度。那么我们就只需要获取这个窗口的宽度就可以了，然后根据元素设置的高宽计算出 .post 宽度下的对应高度然后设置。

首先当然要引入 jQuery。

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script><!-- JS 放在 head 所有 CSS 的后面 -->

<div class="post">
    <a href="http://www.flickr.com/photos/poagao/4127369934/in/faves-sealour/">
        <img class="RDW" width="1024" height="683" src="http://farm3.staticflickr.com/2784/4127369934_cd5c6a6f68_b.jpg" alt=""/>
    </a>
</div>

jQuery(document).ready(function($) { 
    //Responsive_Box
    (function($){
        $.fn.ResponsiveBox = function(options){
            var closests = $(this).find("img,video,iframe,embed,object,.rwd");  //选择中需要调整的后代元素

            /*
            *   这里之所以获取 .post 是因为这个是内容的容器，获取这个更合适。
            *   如果你是内容宽度是 100% 的话可以直接获取浏览器宽度都可以。
            */
            var parentW = $(this).width();  //获取父元素宽度

            $(closests).css('',function(){
                var thisW = $(this).attr('width');  //获取元素设定的宽度
                var thisH = $(this).attr('height');

                //判断宽度
                if (parentW < thisW) {
                    $(this).width(parentW);
                    if (thisH) {
                        $(this).height(thisH*parentW/thisW);
                    };
                } else if(parentW > thisW && thisH && thisW) {
                    $(this).width(thisW);
                    $(this).height(thisH);
                } else {
                    $(this).width('');
                    $(this).height('');
                };
            });
        };
    })(jQuery);

    $('.post').ResponsiveBox();

    $(window).resize(function(){
        //检测浏览器窗口变化
        $('.post').ResponsiveBox();
    })
    // Responsive_Box End

});

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}
img {
  border-width: 0;
}
.post {
  float: left;
  width: 100%;
}
.post img, .post video, .post iframe, .post embed, .post object { 
  max-width: 100%;
}