CSS图片定比例缩放

---

前言

一张banner图，在不同的屏幕上铺满
宽度与屏幕宽度相同，高度根据宽度进行自适应，即图片的定比例缩放
图片的宽高可以撑起盒子的宽高

---

一、图片定比例缩放方案

1.padding（推荐）

我们通过百分比设置宽度，根据宽度的比例数值*9/16，计算出高度的百分比数值，设置内边距为高度的数值，最后用绝对定位把图片百分百填充到我们设置的区域里面。

<div class="img_wrap">
  <img src="" />
</div>

.img_wap {
  padding-bottom: 56%;
  width: 100%;
  position: relative;
}

.img_wap img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

参考博客：https://blog.csdn.net/m_review/article/details/103348758`

2.根据width设置height

width的值100%，height的值通过width的值进行计算
必须先算出width的高度，然后计算出height的绝对高度
不能直接通过width百分比按照得到height百分比（width和height的1%高度是不一样的）

注：会出现二次渲染？css中写入js代码会发生什么？

---

二、图片的路径

1、同一目录下路径，直接使用图片名称进行访问或使用./（代表同级目录）
2、不同目录下路径，通过 . . /（代表上一级目录）
3、/代表根目录
参考博客：https://blog.csdn.net/qq_34769573/article/details/80445681

设置height百分比无效

当用百分比作为宽高时 因为百分比是相对于其最近的父元素的宽高
(【注意一点：宽度一般会继承，而高度不会继承】)
所以首先其父元素要有宽高，宽度一般不设置会有默认值
(比如整个屏幕的宽度,【其实就是一层层继承下来的】)，
但是高度不设置就没有默认值，
因此如果父元素没设高度值，而其内部元素用了百分比作为高度时，是没有效果的

参考博客：https://blog.csdn.net/weixin_33819479/article/details/86276606