html容器中图片的拉伸与缩放

2022-02-23 20:33:44 阅读：461 来源： 互联网

标签：拉伸缩放容器 100% mask height html background 图片

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

html容器中图片的拉伸与缩放