CSS缩放图片问题
相对容器缩放和相对自身缩放两种情况
相对容器等比缩放
平时最常见的情况，简单的说就是图片按照父级宽度高度设置比例。
demo代码
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<style>
.container {
width: 300px;
height: 300px;
}
.demo {
/* 等比例缩放只需要设置width或者height */
width: 50%;
}
</style>
</head>
<body>
<div class="container">
<img class="demo"
src="https://cn.vuejs.org/images/logo.png"
alt="" />
</div>
</body>
</html>demo展示
相对自身等比缩放
这是最近我遇到的一个需求，需要按照图片实际宽高缩放，最快捷的办法是使用css的zoom属性。查下文档，Firefox不支持。再看看自己的浏览器此处应有一个阴险的笑容
demo代码
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<style>
.container {
width: 300px;
height: 300px;
}
.demo {
zoom: 0.5;
}
</style>
</head>
<body>
<div class="container">
<img class="demo"
src="https://cn.vuejs.org/images/logo.png"
alt="" />
</div>
</body>
</html>demo展示
