JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" width="1060" height="300" alt="">
    <h2>已经做了处理的demo</h2>
	<div id="demo1"> 
		<img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" alt=""> 
	</div> 
        <h2>下面的是没有做处理demo，为了更好清晰的看清</h2>
        <div style="width:800px;height:300px;overflow:hidden"> 
		<img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" alt=""> 
	</div>

CSS

#demo1{width:800px;height:300px;overflow:hidden;}

JavaScript

/**
 * 已知图片的宽度和高度的等比例缩放
 */

 function knowImgSize(id) {
	var idWidth = $(id).width(),  // 容器的宽度和高度
		idHeight = $(id).height();

	$(id + ' img').each(function(index,img){
		var img_w = $(this).width(),
			img_h = $(this).height();

		// 如果图片自身宽度大于容器的宽度的话 那么高度等比例缩放
		if(img_w > idWidth) {
			
			var height = img_h * idWidth / img_w;
			$(this).css({"width":idWidth, "height":height});
		}
	});

 }

 // 初始化
 $(function(){
	knowImgSize("#demo1");
 });