参考资料:https://www.qianduan.net/object-fit-object-position/
参考资料:http://www.w3cplus.com/css3/css3-object-fit-and-object-position-properties.html
总结如下:
object-fit有五种属性:fill、cover、contain、none、scale-down
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
margin: 0 auto;
width: 200px;
height: 200px;
}
img{
width: 200px;
height: 200px;
object-fit: contain;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="file:///D:/2001.jpg" alt="">
<p>contain</p>
</div>
</body>
</html>
另外,遇到另一个问题,就是图片的URL,图片在IE中能显示,但是在火狐下不可以。
原因:
图片的路径为:D:\2001.jpg是个绝对路径。在HTML中最好使用相对路径,或者把D:\2001.jpg写为file:///D:/2001.jpg