JSFiddle - React, Tailwind, and code Playground

by Kaiyuan Xie

HTML

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

CSS

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

JavaScript

jQuery(document).ready(function($) { 
	function rdw (){
		$('.RDW').css('',function(){
		    var thisW = $(this).data('width');	//获取元素设定的宽度
		    var thisH = $(this).data('height');

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

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

	rdw();

	$(window).resize(function(){
		//检测浏览器窗口变化
		rdw();
	})

});