页面图片缩放

xiaoxiao2021-02-28  75

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

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

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

效果图如下:

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

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

》》》》》》》》》

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

转载请注明原文地址: https://www.6miu.com/read-2600205.html

最新回复(0)