css这样写：
这样的话我们的div倒是可以随着窗口的变化进行宽度的缩放，但是高度是不变的，这样肯定不行，我们要达到按比例缩放的话高度肯定也是要写成百分比的。那么怎么写呢？直接写百分比么 height:21%这个就别想了，肯定不行的。
我们可以借用一个不常见的属性，padding-bottom属性。
从手册可以看到，当padding-bottom为百分比的值时，定义的是基于父元素宽度的百分比下内边距。
所以我们的css如果这样写：
我们就会得到一个和我们宽度相等的高度，而且我们的div会随着窗口大小的改变进行等比例的缩放。
但是这个方法有一个问题就是，手册上说我们用的padding-bottom的这个值
感觉像是个雷啊
今天就先到这里，感兴趣的小伙伴可以一起探讨探讨。
这是一个缩放的transform属性，y值可以省略，如果y值省略的话，那默认就和x值一样。
举例：
这个例子的执行效果就是，当把指针hover到这个div上的时候，那这个div会放大到原来的1.1倍大。相应的，如果把值改为0.5，hover的时候x和y就会缩小到原来的二分之一。
需要注意的是它的transfom-origin是中心点
只缩放X轴上的倍数。
3、transformY:scale(y)
只缩放Y轴上的倍数。
以上的缩放点都是中心点。
解决这个问题的方法如下：
1、先在html里添加一个img图片标签。
2、运行页面后，这是完整显示图片大小的。图片大概是400x260左右的大小。
3、要进入图片缩放，可以在css样式里设置图片的宽度和高度，但不要宽和高都设置了，比如这里都设置为100px。
4、设置后，看下页面可以看到图片现在变形了。
5、正确的方法应该是只设置其中一个，比如设置宽度为100px，高度设置为自动就行了。
6、这里设置后的效果，图片并没有变形。
7、同样，如果是限定高度的大小，就设置宽度为自动，图片同样不会变形，这样问题就解决了。
