前端设置图片不拉伸的几种方法

如果不控制图片的上传尺寸，在前端展示的时候图片会变形，让图片不变形可以从两个解决这个问题。

1. 用div设置背景图

代码为：

<div class="bgView">

    <!--背景图片不变型-->

    <div class="bgImage"></div>

 </div>

css:样式代码为：

.bgView{

   width: 200px;

   height: 300px;

 }

 .bgImage{

   background: red;

   width: 100%;

   height: 100%;

   background-image: url("../../static/Images/1472127058468.jpg");

   background-size: cover;

   background-position:center;

  }

<div class="bgView">
    <!--背景图片不变型-->
    <div class="bgImage"></div>
  </div>


css:样式代码为：
.bgView{
   width: 200px;
   height: 300px;
 }
 .bgImage{
   background: red;
   width: 100%;
   height: 100%;
   background-image: url("../../static/Images/1472127058468.jpg");
   background-size: cover;
   background-position:center;
  }

效果图为：

2. 用css的object-fit属性来改变img标签图片设置。（object-fit CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。）

先来普及下什么是替换元素？

替换元素
不是所有元素都叫“替换元素”。在CSS中，“替换元素”指的是（引用自这里）：

其内容不受CSS视觉格式化模型（中文释义参见这里）控制的元素，比如image, 嵌入的文档(iframe之类)或者applet。比如，img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。另一方面，其他文档也可能没有固有的尺寸，比如一个空白的html文档。

CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object, video, textarea, input也是替换元素，audio和canvas在某些特定情形下为替换元素。

使用CSS的content属性插入的对象是匿名替换元素。

也就是说，object-fit只针对替换元素有作用，也就是form表单家族控件系列，老牌劲旅img图片，HTML5新贵video视频等元素（据我测试，SVG元素貌似不支持，但可以作为src替换内容出现）。

object-fit具体有5个值：

.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }

每个属性值的具体含义如下（自己理解的白话文，官方释义见官网）：

• fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。

• contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。

• cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。

• none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。

• scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

转回来，直接以代码图片展示效果理解object-fit的值。

代码为：

<div class="bgView">

    <!--img 标签不变形-->

    <img src="../../static/Images/1472127058468.jpg">

</div>

css样式为：

.bgView img{

    width: 100%;

    height: 100%;

    object-fit: fill;//转化不同类型

    background: red;

  }

展示效果图为：

最后总结：

大部分需求都是：

图片按等比例缩放，充满父元素的大小，多余的部分截取（不显示），显示中间部分

如果图片长/宽 >父元素长/宽，那就图片截取图片的长度，否则截取图片的宽度

就可以用以下两种方式设置图片了

1. 如上面的第一种方式

2. object-fit：cover的属性。

本文独发金蝶云社区