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 class="mask_3">
<img src="dragon.png" alt="">/*⼤图⽚默认情况*/
</div>
html图片展示特效<div 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;
}
可以看到，左边⼤图向中间【缩】，变窄了；⽽右边⼩图向两边【伸】，变宽了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。