前言：我們?cè)谇岸孙@示圖片縮略圖的時(shí)候辜贵，會(huì)遇到不清楚圖片的尺寸，然后使用固定高寬比的img來(lái)顯示圖片带欢，這樣會(huì)導(dǎo)致高寬比不一致的圖片會(huì)被擠壓拉伸胁塞。本文站以前端小白的視角來(lái)探討這種問(wèn)題的解決方案。
方案一 max-width和max-height
使用max-width和max-height來(lái)做溉奕，這種情況下不能保證每一張圖片預(yù)覽都是相同寬高的褂傀，但是卻不會(huì)擠壓拉伸圖片。
例：
img {
? ? max-width: 450px;
? ? max-height: 450px;
}
方案二 使用background-size屬性的cover值或者contain
按照單詞的字面意思：
cover 把背景圖像擴(kuò)展至足夠大加勤，以使背景圖像完全覆蓋背景區(qū)域仙辟。背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中。
contain 把圖像圖像擴(kuò)展至最大尺寸鳄梅，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域叠国。 這種方式類似與第一種實(shí)現(xiàn)。?
例：
<div class="container"></div>?
.container {
? ? width: 150px;
? ? height: 100px;
? ? background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
? ? background-size: cover;
? ? background-repeat: no-repeat;
? ? background-position: 50% 50%;
}
.container {
? ? width: 150px;
? ? height: 100px;
? ? background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
? ? background-size: contain;
? ? background-repeat: no-repeat;
? ? background-position: 50% 50%;
}
方案三 使用CSS3的object-fit屬性
object-fit CSS 屬性指定替換元素的內(nèi)容應(yīng)該如何適應(yīng)到其使用的高度和寬度確定的框戴尸。
這個(gè)屬性的值有以下幾種：
fill：被替換的內(nèi)容大小可以填充元素的內(nèi)容框粟焊。 整個(gè)對(duì)象將完全填充此框。 如果對(duì)象的高寬比不匹配其框的寬高比，那么該對(duì)象將被拉伸以適應(yīng)项棠。相當(dāng)于固定寬高下未做任何調(diào)整的樣式悲雳。
contain：被替換的內(nèi)容將被縮放，以在填充元素的內(nèi)容框時(shí)保持其寬高比香追。 整個(gè)對(duì)象在填充盒子的同時(shí)保留其長(zhǎng)寬比合瓢，因此如果寬高比與框的寬高比不匹配，該對(duì)象將被添加“黑邊”透典。和backgroud-size屬性的contain類似晴楔，只是多了黑邊。
cover：被替換的內(nèi)容大小保持其寬高比峭咒，同時(shí)填充元素的整個(gè)內(nèi)容框税弃。 如果對(duì)象的寬高比與盒子的寬高比不匹配，該對(duì)象將被剪裁以適應(yīng)凑队。和background-size屬性的cover類似钙皮。
none：被替換的內(nèi)容尺寸不會(huì)被改變。
scale-down：內(nèi)容的尺寸就像是指定了none或contain顽决，取決于哪一個(gè)將導(dǎo)致更小的對(duì)象尺寸短条。
<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />
.cover {
? object-fit: cover; // contain
? width: 50px;
? height: 100px;
}
方案四 container包裹，設(shè)置overflow:hidden
例：
<div class="container"><img src="http://i.stack.imgur.com/2OrtT.jpg" /></div>
.container {
? ? width: 300px;
? ? height: 200px;
? ? display: block;
? ? position: relative;
? ? overflow: hidden;
}
.container img {
? ? position: absolute;
? ? top: 0;
? ? left: 0;
? ? width: 100%;
}
圖片居中：
var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);
方案五 懶人必備 jqthumb庫(kù)
作者：yypsober
來(lái)源：CSDN
原文：https://blog.csdn.net/yypsober/article/details/79468095
版權(quán)聲明：本文為博主原創(chuàng)文章才菠，轉(zhuǎn)載請(qǐng)附上博文鏈接茸时！
