# 图片等比例缩放方案
在`Web`开发时无可避免的需要将图片进行缩放，缩放时需要保证图片不变形，也就是需要等比例缩放。
## 设定宽度或高度
引入图片时，仅设置图片的`width`或者是`height`就可以使另一边自适应，从而实现等比例缩放。
```html
```
## 设定最大宽度或最大高度
引入图片时，仅设置图片的`max-width`或者是`max-height`就可以使另一边自适应，从而实现等比例缩放。
```html
```
## 根据父容器适应
将图片设定为`max-width: 100%;`与`max-height: 100%;`，就可以自适应父容器宽高进行等比缩放。
```html
```
## 使用Js设定宽高
使用`JavaScript`预先取得图片并根据指定的高度或者是宽度计算缩放比，从而计算出另一边的长度，设定好宽高后加入文档。
```html
```
## 使用CSS背景属性
使用`CSS`的`background`属性进行等比缩放。
```html
```
## 使用CSS转换属性
使用`CSS`的`transform`属性直接进行缩放。
```html
```
## 使用CSS适应属性
使用`CSS`的`object-fit`属性直接进行图片适应缩放。
```html
```
## 代码示例
```html
图片等比例缩放
```
## 每日一题
```
https://github.com/WindrunnerMax/EveryDay
```
