Responsive Box

Responsive-Box.html

<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>

script.js

jQuery(document).ready(function($) { 
	//Responsive_Box
    (function($){
        $.fn.ResponsiveBox = function(options){
            var closests = $(this).children("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

});

style.css

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%;
}