在很多平台的新闻，博客列表中都能见到有图文显示，因为新闻，博客等列表都也许不是平台发布的，无法控制很多图片的大小尺寸，如何在杂乱无章的图片尺寸中让列表的图片看起来整洁呢？如下情况：
---文章列表---
WeChat_1493876450.jpeg
---文章详情---
WeChat_1493876463.jpeg
看出些什么来了吗？列表的图片和详情的图片大小是不一样的；
下面是我的一种实现方法和网络中的一种实现方式的比较，之前都是总感觉网络中的某些方式不太准确，我视乎也觉得我的方式还不太准确吧。希望大家有好的方法能交流。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.imgcontent{
width: 190px;
height: 100px;
overflow: hidden;
background-color: yellow;
}
</style>
<script type="text/javascript" src="./jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function getImageWidth(url,callback){
var img = new Image();
img.src = url;
// 如果图片被缓存，则直接返回缓存数据
if(img.complete){
callback(img.width, img.height);
}else{
// 完全加载完毕的事件
img.onload = function(){
callback(img.width, img.height);
}
}
}
$(document).ready(function() {
var img=$(".imgcontent img");
var imgWith=img.width();//图片的实际高度
var imgHeight=img.height();//图片的实际高度
var imgSrc = img.attr("src");
getImageWidth(imgSrc,function(w,h){
imgWith=w;
imgHeight=h;
var parentWidth=parseInt(img.parent().width());//父视图宽度
var parentHeight=parseInt(img.parent().height());//父视图高度
var imgRotio=imgWith/imgHeight;
var parentRotio=parentWidth/parentHeight;
if (imgRotio>parentRotio) {//宽图片
var heightRotio=imgHeight/parentHeight;//宽的比例
var width02=parentWidth/parentWidth;//求高
img.css({"height":parentHeight+"px","margin-left":(parseInt(parentWidth)-width02)/2+"px"});
}else{//高图片
var widthRotio=imgWith/parentWidth;//宽的比例
var imgHeight02=imgHeight/widthRotio;//求高
img.css({"width":parentWidth+"px","height":imgHeight02+"px","margin-top":(parseInt(parentHeight)-imgHeight02)/2+"px"});
}
});
});
</script>
</head>
<body>
<h2>这是原图大小</h2>
<img src="./me.jpg" style="vertical-align: middle;"
/>
<h2>我的方式</h2>
<div class="imgcontent">
<img src="./me.jpg" style="vertical-align: middle;"
/>
</div>
<h2>网络方式一</h2>
<div style="width: 190px; height: 100px; overflow: hidden;">
<a href="">
<img src="./me.jpg" style="vertical-align: middle;"
onload="this.style.marginTop = (parseInt(this.parentNode.parentNode.style.height) - this.height)/2 + 'px';this.style.marginLeft = (parseInt(this.parentNode.parentNode.style.width) - this.width) /2 + 'px'" />
</a>
</div>
</body>
</html>
效果如下：
4.pic.jpg
你更赞成上面那种方式呢？有更好的方法请分享！
