在很多平臺的新聞扔仓，博客列表中都能見到有圖文顯示，因為新聞咖耘，博客等列表都也許不是平臺發(fā)布的翘簇，無法控制很多圖片的大小尺寸，如何在雜亂無章的圖片尺寸中讓列表的圖片看起來整潔呢儿倒？如下情況：
---文章列表---
WeChat_1493876450.jpeg
---文章詳情---
WeChat_1493876463.jpeg
看出些什么來了嗎版保？列表的圖片和詳情的圖片大小是不一樣的；
下面是我的一種實現(xiàn)方法和網(wǎng)絡(luò)中的一種實現(xiàn)方式的比較夫否，之前都是總感覺網(wǎng)絡(luò)中的某些方式不太準(zhǔn)確彻犁，我視乎也覺得我的方式還不太準(zhǔn)確吧。希望大家有好的方法能交流凰慈。
<!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;
// 如果圖片被緩存汞幢，則直接返回緩存數(shù)據(jù)
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>網(wǎng)絡(luò)方式一</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
你更贊成上面那種方式呢？有更好的方法請分享微谓！
