这是一张图片在网页上显示的正常效果：
如果我们将img元素的宽高设置下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<img src="./hsq.png" alt="" style="height: 500px; width: 100px;">
</body>
</html>
这肯定不是我们想要的效果，因此我们可以通过使用object-fit来进行修改。
1、将其值设置为contain
<img src="./hsq.png" alt="" style="height: 500px; width: 200px; object-fit: contain;">页面显示效果：
更细致点：
蓝色部分为img元素的内容框，当object-fit的值为contain时，图片会进行缩放，但是原有的长宽比例不会发生改变。
2、值为cover
<img src="./hsq.png" alt="" style="height: 500px; width: 200px; object-fit: cover;">页面显示效果：
可见，当值设置为cover时，图片会撑满整个内容框，若图片无法显示全，则将被剪裁以适应内容框，但可能会造成图片信息的缺失。
3、值为fill
页面显示效果：
object-fit的默认值为fill，即填充满内容框，如果图片的宽高比与内容框不相匹配，那么图片将被拉伸以适应内容框。
如果在阅读中遇到错误，请您立刻指出，如果有写的不好的地方，也请提出您宝贵的建议。谢谢！
3680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
