页面图片缩放

今天是作为程序猿工作的第三天，小白一个，所以遇到的问题也会很多，现在就今天困扰我时间最长的一个问题来谈谈我的解决方案的历程。

在做最基本的静态页面布局时，手里的图都是二倍图，这就牵扯到要缩放图片，当然，一个一个设置是可以，但是却是相当麻烦，平白无故会多出很多代码。一开始，我想到的办法是用cs中的transform：scale（0.5）；对图片进行缩放，但这样的话会产生如图问题：

第一图为原图，第二图为缩放后的，可以看出，图二图片是缩小了，但是在没有设置padding的条件下，图片和父元素边距存在一定的距离，这不符合我预期的想法，接下来我又加了一行代码，写成这样：

效果图如下：

由上图可以看出：虽然图片”上边距“和”右边距“已经不存在了，但是”下边距“仍有，在实际的项目开发过程中的表现为，虽然图片进行了缩放，而且父元素也没有设置宽高，但是父元素却占据图片原尺寸的大小，这显然是不合理的。

后来经过查资料得到了一个办法，且只需一行代码即可搞定：

》》》》》》》》》

这样，父元素四周的边距都不存在了。