当我们给img标签加上固定的宽和高时，img标签中的图片会默认被拉伸变形，如图：
<body>
<img src="./demo.jpg" alt="">
<style>
img{
width: 300px;
height: 150px;
}
</style>
</body>
图1-给img元素加上固定宽高后图片被拉伸变形
如果我们需要让该元素占据固定的宽高大小，而又不希望图片被拉伸变形，可以在img标签外套一个div（或其他父级元素），然后将固定的宽高加在父级元素上，这样img标签本身就可以只设定宽或高，让另一边自适应。除此之外，还可以将该图片作为元素背景，然后通过background-size和background-position等背景相关样式属性来设置该图片显示的位置和大小。
但这些方法要么看上去颇为不便，要么并不适用于video标签中的视频元素。
为了更好且更方便地解决这类问题，我们可以使用接下来的这两个css属性——object-fit和object-position。
1.object-fit
css属性object-fit一般用在img或video标签上，定义了元素内容要如何适应容器的宽高，IE15及以前的版本不支持此属性。
常用属性值：
object-fit: fill;
默认值，内容可能会被拉伸以完全适应容器的宽高。和不使用该属性的效果一致。
示例：
<style>
img{
width: 300px;
height: 150px;
object-fit: fill;
}
</style>
图2-设置“object-fit: fill;”效果与不使用该属性一致，图片会被拉伸以完全适应元素宽高
object-fit: cover;
保持内容的原有宽高比例进行缩放，让图片的内容能够完全覆盖元素容器，图片可能会被剪切掉一部分。
示例
<style>
img{
width: 300px;
height: 150px;
object-fit: cover;
}
</style>
图3-可以看见图片没有被拉伸，显示出来的部分在原图中处于中间位置
object-fit: contain;
保持内容原有宽高比例进行缩放，使内容能够完全呈现出来。
示例：
<style>
img{
width: 300px;
height: 150px;
object-fit: contain;
}
</style>
图4-设置“object-fit: contain;”后图片会在img标签内按原有比例进行缩放，使图片全部显示出来，可以看见图片默认显示在容器正中间
object-fit: scale-down;
保持内容的原有宽高比例进行缩放，显示的效果将与属性值分别为none和contain时内容尺寸较小的那个相同（contain的效果见上方，none的效果见下方）。
示例
<style>
img{
width: 300px;
height: 150px;
object-fit: scale-down;
}
</style>
图5-可见在这个例子中，当object-fit属性值为contain时图片的显示尺寸更小，所以scale-down属性值与contain属性值效果相同
object-fit: none;
保持元素内容原有的尺寸宽高，不会进行缩放，元素内容可能填不满容器，也可能会被剪切掉一部分。
示例
<style>
img{
width: 300px;
height: 150px;
object-fit: none;
}
</style>
图6-图片内容保持了原有的宽高尺寸，因为原图过大所以没有完全显示出来，显示出来的部分在原图中处于中间位置
object-fit: initial;
将该属性的属性值设为默认值（object-fit属性的默认属性值是fill）。
示例
<style>
img{
width: 300px;
height: 150px;
object-fit: initial;
}
</style>
图7-将object-fit设为默认值，显示效果与fill相同
object-fit: inherit;
从父元素继承该属性的值。
示例
<body>
<div>
<img src="./demo.jpg" alt="">
</div>
<style>
div{
object-fit: contain;
}
img{
width: 300px;
height: 150px;
}
</style>
</body>
图8-只有父元素添加了object-fit属性为contain，img标签未添加该属性时的显示情况
<style>
div{
object-fit: contain;
}
img{
width: 300px;
height: 150px;
object-fit: inherit;
}
</style>
图9-子元素img的object-fit属性设为inherit后，从父元素继承了该属性的值
2.object-position
object-position属性常与object-fit一起使用，一般用于img和video标签，它规定了元素内容在容器内显示的位置，默认为居中。该属性同样不被IE15及以前的浏览器支持。
常用属性值：
position
指定内容在容器中的具体位置，第一个值指定内容在x轴上的位置，第二个值指定内容在y轴上的位置，默认都是50%，两个值之间通过空格隔开。第二个值可以省略，如果省略则取默认值为居中。可用的表示位置的形式有：
x%
可以用百分比来表示内容在容器中显示的位置。
示例
<body>
<img src="./demo.jpg" alt="">
<style>
img{
width: 300px;
height: 150px;
object-fit: contain;
object-position: 100% 0%;
}
</style>
</body>
图10-object-fit属性值为“contain”时，内容的高撑满容器，此时object-position的第二个表示y轴位置的值无论是百分之几都不会影响内容显示的位置（但如果是具体的距离则可以）。同理，当object-fit值为“cover”时，内容的宽撑满容器，object-position的第一个表示x轴位置的值无论是百分之几都不会影响内容显示的位置，这里不再做测试。
left/right/top/bottom/center
可以使用方位值进行设置。
示例
<style>
img{
width: 300px;
height: 150px;
object-fit: contain;
object-position: right bottom;
}
</style>
图11-同百分比一样，当内容的高（或宽）撑满容器的高（或宽）时，第二个（或第一个）方位值不会影响内容显示的位置。这里第二个方位值无论是“top”还是“bottom”、“center”，图片的位置都不会发生改变。
具体的距离（包括数值和单位）
还可以为内容的位置指定具体的x轴和y轴上的距离（包含数值和单位），以容器的左上角为(0,0)坐标，向右和向下分别为x轴和y轴的正半轴，可以设置负值。内容超出容器的部分可能会被剪切。
示例
<style>
img{
width: 300px;
height: 150px;
object-fit: contain;
object-position: 50px 50px;
}
</style>
图12-使用具体的距离进行设置可以准确明了的定位内容在x轴和y轴上的位置，内容超出容器的部分会被剪切
混合使用
指定内容在容器内的具体位置时，上述三种位置表示方法可以混合使用。
示例
<style>
img{
width: 300px;
height: 150px;
object-fit: contain;
object-position: right 50px;
}
</style>
图13-不同的位置表示方法可以混合使用，一样会生效
initial
设为默认值，object-position属性的默认值是“50% 50%”。
示例
<style>
img{
width: 300px;
height: 150px;
object-fit: contain;
object-position: initial;
}
</style>
图14-object-position属性值默认为居中显示
inherit
从父元素继承属性值。
示例
<body>
<div>
<img src="./demo.jpg" alt="">
</div>
<style>
div{
object-position: left;
}
img{
width: 300px;
height: 150px;
object-fit: contain;
object-position: inherit;
}
</style>
</body>
图15-img标签可以从父元素div处继承object-position的属性值，如图，图片不再默认居中显示，而是和div元素样式中定义的一样靠左显示
写在最后
以上为全部内容，感谢阅读。
本博文仅为学习记录和分享交流，如有错漏，还请帮忙指出，也欢迎更多补充，不胜感激。
GitHub地址：https://github.com/ljxlijiaxin.
来自：https://www.cnblogs.com/ljxlijiaxin/archive/2021/02/07/14385149.html
原生Js对文件类型的判断，判断文件是图片，视频等格式
在我们开发中，会遇到这样的场景：1.服务器返回Json数据，根据数据类型来显示是图片还是视频。2.前端上传文件，需要指定文件类型才能上传到服务器。这时候就需要使用Js来判断对应文件的类型
前端图片懒加载的实现，采用Lazy Load 图片延迟加载提高用户体验
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。
web前端图片加载优化，从图片模糊到清晰的实现过程
在网页图片显示的时候，会发现许多网站采用了先模糊，然后在慢慢清晰的过程，这样的加载用户体验是比较好的，那么如何实现呐？默认加载2张图片，一张缩略图，一张原图，当打开网页的时候默认只显示缩略图
lazysizes.js使用方法_实现图片懒加载、延迟加载的js插件
当你的网站使用了大量图片时候，如果一次性全部加载，那么会严重影响网站的速度。通过lazysizes.js插件就能很好解决这个问题，它可以实现图片的延迟加载【懒加载】
js实现图片局部放大效果
图片局部放大效果结合的知识点主要是DOM的操作，以及事件的应用，所以首先要对DOM的操作有一定了解，其次能对事件的应用有一定的累积。
网站图片优化的重要性与技巧方案
网站图片优化技巧：1、图片名包括关键词，2、Alt标签包括关键词，3、图片周边文本包括关键词，4、GLF和JPGE图画优化，5、在图片链接中运用锚文本关键字
css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果
前端需要显示矩形的缩略图，接口返回的图片尺寸大小不一，宽高不相等，需要前端来处理并显示成正方形，类似微信朋友圈图片的效果。那么使用纯css该如何实现不定宽高的图片居中裁剪呢？
原生js 生成海报图_利用canvas合成图片的实现方法
目前浏览器对html5的支持越来越好，我们现在不用服务器端，直接在前端利用canvas就可以进行图片的合成了。下面就介绍下如何通过原生js 来生成海报图
网页中默认图片的几种解决方式
现在网页中图片随处可见，但避免不了有时会出现图片资源失败的情况，这里的alt属性是为了当图片加载失败时告诉用户图片信息的 ,能不能美化一下呢？下面给出几种方式
h5移动端禁止长按图片保存
在移动端访问H5页面的时候，长按图片就会把图片保存起来，为了能够让用户体验更好一些，我们需要长按的时候也不保存图片。那该如何实现呢？下面给出3种解决方案。使用 pointer-events:none、全局属性、加一层遮罩层
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!