html容器中图片的拉伸与缩放
作者：互联网
html中能通过"background-image"设置背景图片，也能通过<img>标签来在容器中插入图片。
当图片自身大小与容器大小无法匹配时，就需要缩放使其填充容器看上去正常显示。接下来分开讲解。
- 背景图片“background-image”
首先我们要设置背景图片。因为图片塞入容器中时，无论图片多大，他的宽度都是默认展开全部比例，而高度则需要手动设置，否则不会显示。
父容器设置了红色边框，以此分辨填充效果。
.mask_1 {
height: 100%; /*这里需要设置高度为100%，因为图片默认以自身的宽度展开(无论他是否大过父级容器)，若不设置高度，则图片将无法展示*/
background-image: url("dragon.png");
}
.mask_2 {
height: 100%;
width: 100%;
background-image: url(小图测试.jpg);
}
效果如下。左图原图比容器大，右图更小。
可以看到默认情况下，大图以容器左上角为原点铺开；小图则是以剩余空间进行平铺。
接下来使用 background-size 来进行拉伸的控制。这个属性能取三个值，默认是auto，也就是图片原始尺寸塞进去，无论他是否能显示完全。
cover：该属性会按比例拉伸当前图片，直至其中较短那条边填满容器。此举会填充整个容器，但不可避免地会出现裁剪——如果原图片长宽比与容器比例不一致的话。
.mask_1 {
height: 100%;
background-image: url("dragon.png");
background-size: cover;
}
.mask_2 {
height: 100%;
width: 100%;
background-image: url(小图测试.jpg);
background-size: cover;
background-repeat: no-repeat;/*禁止图片平铺空白，此项仅限于图片本身小于容器大小时*/
}
可以看到，大图片等比例缩放，短边为高，因此右侧被裁剪了；而小图片的短边为宽，因此下侧被裁剪了。
注：可以通过对margin设置负值，来使得内部容器背景图片向相应方向回调，看上去是在原始图片中心
.mask_1 {
height: 100%;
background-image: url("dragon.png");
background-size: cover;
margin-left: -25%;/*向左移动父容器25%宽度。切记对父容器设置overflow：hidden，否则溢出内容会超出父元素*/
}
注意，这里对相反方向的调动比例不应过大！！！
因为本身是由cover设定是按比例填充父容器的，若设置过大，他会向那个方向等比例放大。
以下图一为-25%，图二为-125%移动
contain：该选项类似上面的cover，只不过他判定的边是【最长那条边长】，因此图片会完整显示，但有可能会出现空白位置。
.mask_1 {
height: 100%;
background-image: url("dragon.png");
background-size: contain;
/*这里大图片没有使用禁止重复，因此大图片下方的空白被填充了*/
}
.mask_2 {
height: 100%;
width: 100%;
background-image: url(小图测试.jpg);
background-size: contain;
background-repeat: no-repeat;
}
具体数值：可以直接填上具体的数字或者百分比，以此来自定义缩放百分比。格式为 background-size： 宽 高； 如果不设置高的话，他会按照原始比例进行缩放。
.mask_1 {
height: 100%;
background-image: url("dragon.png");
background-size: 50%;
}
.mask_2 {
height: 100%;
width: 100%;
background-image: url(小图测试.jpg);
background-size: 60% 120%;
background-repeat: no-repeat;
}
可以看出，第一个大图片自动压缩为【父容器】的50%宽度大小（高度自动等比例缩放），并且因为没有设置禁止重复，因此尽数填充下去了；
而第二个高度设置超出了100%，因此被纵向拉伸并被裁剪了。
设置具体像素值也是同理，再次不再赘述。
- <img>标签插入图片
当然我们也可以在父容器内，通过<img>标签插入图片。我们最好也做一下父容器的设置，别让溢出了。
<div>
<div style="width: 610px; height: 510px;
border: 5px solid red; clear: left;
overflow: hidden; float: left;
margin-right: 60px" class="mask_3">
<img src="dragon.png" alt="">/*大图片默认情况*/
</div>
<div style="width: 610px; height: 510px;
border: 5px solid red; overflow: hidden;
float: left" class="mask_4">
<img src="小图测试.jpg" alt="">/*小图片*/
</div>
</div>
可以看到是和背景图片差不多，默认情况下。
接下来用 object-fit 这个属性来进行调整。参数如下：
fill：该属性会使得图片显示所有内容至父容器内，如果大小不一致，那就按照父容器比例缩放；
.mask_3 img {
width: 100%;
height: 100%;
object-fit: fill;
}
.mask_4 img {
width: 100%;
height: 100%;
object-fit: fill;
}
可以看到，左边大图向中间【缩】，变窄了；而右边小图向两边【伸】，变宽了。
contain:这个同背景图片的contain，以最长边进行判定，因此往往会显示完整，并留白。这里会自动处于父容器的中心位置。
.mask_3 img {
width: 100%;
height: 100%;
object-fit: contain;
}
.mask_4 img {
width: 100%;
height: 100%;
object-fit: contain;
}
可以看到处于中心位置。需要注意的是，<img>标签还是拥有一开始设定的100%父元素大小，只不过那些留白部分无法填充就是了。
cover：以短边进行填充，超出部分会自动裁剪，同理处于中心位置。
.mask_3 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mask_4 img {
width: 100%;
height: 100%;
object-fit: cover;
}
可以看到，这里就不需要像背景图片那样需要调整图片的负外边距，直接自带居中效果！
这里不支持上下左右移动，因为实际超出部分是被直接裁掉了的。所以设置边距的话只会留下空白。
none:原始尺寸展示，但整体处于父元素中心。
.mask_3 img {
width: 100%;
height: 100%;
object-fit: none;
}
.mask_4 img {
width: 100%;
height: 100%;
object-fit: none;
}
可以看到，大图片多余部分被裁减，并处于父元素中心位置。小图片同理。
scale-down：自动处理。会自动选择【none】或者【contain】其中的一种，取决于谁能完整显示出来。
.mask_3 img {
width: 100%;
height: 100%;
object-fit: scale-down;
}
.mask_4 img {
width: 100%;
height: 100%;
object-fit: scale-down;
}
可以看到，如果是大图片，那么他就会自动选择【contain】——以最长边进行填充；
若是小图片则以【none】属性展示。
力保让图片能够整体完整地展示出来！
与君共勉。
标签：拉伸,缩放,容器,100%,mask,height,html,background,图片 来源： https://www.cnblogs.com/ricardox3/p/15928745.html