图片自适应容器的几种方法

一、图片容器固定宽和高（主要适用于PC端）

1、使用max-width: 100%、max-height: 100%

html：

  <!-- 图片容器固定宽高 max-width/max-height-->
  <p>图片容器固定宽高 max-width/max-height</p>
  <div class="fixed-size-container">
    <img src="https://img12.360buyimg.com/img/jfs/t18304/318/2619441393/498742/cebbd504/5b0384fcNb1e9bbe3.png" />
  </div>

css：

.fixed-size-container {
  width: 300px;
  height: 150px;
  border: 1px solid #ddd;
}

.fixed-size-container img{
  margin: 0 auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

2、使用background-image设置背景图片

html：

  <!-- 图片容器固定宽高 背景图片-->
  <p>图片容器固定宽高 背景图片</p>
  <div class="fixed-size-container-bg">
  </div>

css：

.fixed-size-container-bg {
  margin-top: 20px;
  width: 300px;
  height: 150px;
  border: 1px solid #ddd;
  background-image: url('https://img12.360buyimg.com/img/jfs/t18304/318/2619441393/498742/cebbd504/5b0384fcNb1e9bbe3.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

3、使用css3的属性：object-fit

html：

  <!-- 图片容器固定宽高 object-fit:contain -->
  <p>图片容器固定宽高 object-fit:contain</p>
  <div class="fixed-size-container-object-fit">
    <img src="https://img12.360buyimg.com/img/jfs/t18304/318/2619441393/498742/cebbd504/5b0384fcNb1e9bbe3.png" />
  </div>

css：

.fixed-size-container-object-fit {
  margin-top: 20px;
  width: 300px;
  height: 150px;
  border: 1px solid #ddd;
}

.fixed-size-container-object-fit img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

4、使用js计算图片比例，最大限度让图片占满容器

html：

  <!-- 图片容器固定宽高 使用js计算图片比例，最大限度自适应容器 -->
  <p>图片容器固定宽高 使用js计算图片比例，最大限度自适应容器</p>
  <div class="fixed-size-container-js-compute">
    <img src="https://img12.360buyimg.com/img/jfs/t18304/318/2619441393/498742/cebbd504/5b0384fcNb1e9bbe3.png" id="jsComputedImg"/>
  </div>

css：

.fixed-size-container-js-compute {
  margin-top: 20px;
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

js：

/**
 * 获取自定义图片缩放样式
 * @param {*} containerWidth 容器宽度
 * @param {*} containerHeight 容器高度
 * @param {*} imgWidth 图片原始宽度
 * @param {*} imgHeight 图片原始高度
 * @returns
 */
function getAdaptImgScaleStyle(
  containerWidth,
  containerHeight,
  imgWidth,
  imgHeight
) {
  let scale;
  if (imgWidth < imgHeight) {
    scale = containerHeight / imgHeight;
  } else {
    scale = containerWidth / imgWidth;
  }
  return `
    position: absolute;
    width: unset;
    height: unset;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0) scale(${scale});
    transform-origin: center;
    max-width: unset!important;
  `;
}

document.getElementById('jsComputedImg').addEventListener('load', (e) => {
  const {width, height} = e.target;
  e.target.style = getAdaptImgScaleStyle(250, 150, width, height)
})

二、图片容器没有固定宽和高（场景使用主要是移动端）

1、使用paddding/margin的百分比值

• 直接对图片容器设置padding/margin的百分比值（缺点：无法设置max-height值）
• 对图片容器的伪元素（:before或者:after）设置padding/margin的百分比值（优点：兼容性比较好，也能设置max-height值）
  html：

  <!-- 容器没有固定宽高 图片占满容器 img: 宽*高：107*60-->
   <div class="padding-container1">
    <img src="http://m.360buyimg.com/img/s120x60_jfs/t1/198179/18/9397/244165/614b1966Eedc1cdb1/11129d04484cffff.jpg" />
  </div>

  <!-- 容器没有固定宽高 图片占满容器 img: 宽*高：720*1280-->
  <div class="padding-container2">
    <img src="http://m.360buyimg.com/img/jfs/t1/122296/30/16264/542718/6146e92aE52b6f41b/b450a73167a26ecb.jpg" />
  </div>

css：

/** 直接对图片容器设置padding的百分比值，容器占满屏幕**/
.padding-container1 {
  position: relative;
  padding-top: xx%;   /** xx% = 图片的原始高宽比 **/
  background-color: red;
}
.padding-container1 img {
  position: absolute;
  top: 0;
  width: 100%;
}

/** 直接对图片容器设置margin的百分比值，容器占满屏幕**/
.padding-container1 {
  position: relative;
  margin-top: xx%;   /** xx% = 图片的原始高宽比 **/
  background-color: red;
}
.padding-container1 img {
  position: absolute;
  top: 0;
  width: 100%;
}

/** 对图片容器的伪元素（:before或者:after）设置padding的百分比值， 容器只占屏幕的一半 **/
.padding-container2 {
  position: relative;
  background-color: red;
}
.padding-container2:before {
  content: '';
  padding: 0 50% 88.88% 0; /** 图片原始高/宽的比例** 设置宽度50%，88.88% =  50% * 1280 / 720 （720*1280是图片的原始宽高）
  display: block;
}
.padding-container2 img {
  position: absolute;
  top: 0;
  width: 100%;
}

/** 对图片容器的伪元素（:before或者:after）设置margin的百分比值， 容器只占屏幕的一半 **/
.padding-container2 {
  position: relative;
  overflow: hidden; /** 去掉margin折叠 **
  background-color: red;
}
.padding-container2:before {
  content: '';
  margin: 0 50% 88.88% 0; /** 图片原始高/宽的比例** 设置宽度50%，88.88% =  50% * 1280 / 720 （720*1280是图片的原始宽高）
  display: block;
}
.padding-container2 img {
  position: absolute;
  top: 0;
  width: 100%;
}

2、https://juejin.cn/post/6882574726099632136

3、实现等宽高比的容器

html：

  <div class="padding-container">
  </div>

css：

.padding-container {
  width: 50%;
  padding-top: 50%; 
  background-color: red;
}