日常项目中，后端传图不规则，比例大小不一。前端又要去做适应，是一个让人非常头大的问题。
总结了一个不规则图片不变形的解决方案：
注：先写一个长 300px 宽 200px 带边框的 div ，图片接近方形，实现图片正常显示不变形。
<div class="box box1">
...
</div>
1、背景图法
通过背景图的 background-position 属性，可以使图片居中显示。国外一些网站有看到类似的案例，简单好操作。
.box1{
background: url("https://hbimg.huabanimg.com/42d38784a9e5ad1cbce090966a7a87c274f5d27ba616-VMBaO0_fw658") no-repeat center center;
background-size: auto 100%;
}
这样可以显示完整的图片，不变形：
image.png
若要图片填满容器，可以将 background-size 属性改为 100% auto ：
background-size: 100% auto;
如下图：
image.png
同样 background-size 的 contain （完整显示）和 cover （填充）属性也能起到相同的效果。
2、object-fit
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框，不支持IE。
可用属性：
fill 不保持纵横比缩放图片，使图片完全适应
contain 保持纵横比缩放图片，使图片的长边能完全显示出来
cover 保持纵横比缩放图片，只保证图片的短边能完全显示出来
none 保持图片宽高不变
scale-down 当图片实际宽高小于所设置的图片宽高时，显示效果与none一致；否则，显示效果与contain一致
inherit 继承
initial 默认值
unset 继承父元素，若父元素没有属性则显示默认值
image.png
CSS：
ul>li>img{
width: 150px;
height: 100px;
}
ul>li:nth-child(1)>img{
object-fit: fill;
}
ul>li:nth-child(2)>img{
object-fit: contain;
}
ul>li:nth-child(3)>img{
object-fit: cover;
}
ul>li:nth-child(4)>img{
object-fit: none;
}
ul>li:nth-child(5)>img{
object-fit: scale-down;
}
3、flex
该方法也可以实现以上两种方法的效果。
以容器宽 200px 高 300px ，图片为方形为例：
设置 width: 100% 为图片完整显示，多出部分留白。
设置 height: 100%; 为图片全部填充，这时候需要给图片的容器添加 overflow: hidden; 属性，防止图片超出。
图片等比例缩放，多余部分，还有就是要考虑IE兼容问题，可以在手机端项目中使用。
ul{
display: flex;
}
ul li{
width: 200px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #23caff;
margin: 20px;
overflow: hidden;
}
img{
width: 100%;
}
4、js 方法
js 方法应该比较通用，可以兼容多版本浏览器。
var img = document.getimgmentById("img");
var div = document.getimgmentById("div");
img.onload = function () {
if (img.naturalHeight < div.offsetHeight) {
img.style.width = "auto";
img.style.height = "100%";
}
}
5、jQuery方法
也可以兼容多版本浏览器，需要 jQuery 加持。
var $tabLi = $("#tab").find("ul li"),
length = $tabLi.length,
liWidth = $tabLi.width(),
propArr = [];
$tabLi.each(function (i) {
var $img = $(this).find("img");
var width = $img.width();
width?imgLoad.call($img[0]):($img[0].onload = imgLoad);
function imgLoad() {
var width = $(this).width();
var height = $(this).height();
propArr[i] = width/height;
this[width>height?"width":"height"] = liWidth;
for (var j = 0; j < length; j++)if ( !propArr[j] )return;
}
});
6、一个原始的方法
图片等比例缩放，多余部分空白填补：
ul li {
width: 200px;
height: 200px;
text-align: center;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
}
ul li img {
max-height: 100%;
max-width: 100%;
}
网友评论