目前项目中有个需求是将同一张图片显示在不同的页面上，但是因为页面给予的容器大小不一，这就需要将图片等比例缩小。最近学到了两个个能将图片等比例缩小的属性，个人感觉用起来非常方便。如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img缩放</title>
<style>
.yuan {
width: 100%;
height: 100%;
border: 1px solid red;
}
.suo > img {
border: 1px solid gray;
width: auto;
height: auto;
max-width: 10%;
max-height: 10%;
}
</style>
</head>
<body>
<div class="yuan">
<img src="./../images/404.jpg">
</div>
<div class="suo">
<img src="./../images/404.jpg">
</div>
</body>
</html>