情景如下:
沈志勇,你看一下gitlab上面xxx的项目,这个是我们的一个老项目。我们要基于这个老点的框架,添加点新的功能。老大说到!
说实话,就怕接手老项目。里面的坑不知道有多少。皇天不负有心人,真的让我找到了一个坑。在一个公共组件里面,有个img图片不知何故,加了固定宽度,不仅加在了行间样式上,还给我加了‘!important’。看到代码的那一刻,我瞬间就:
简化一下,如下:
<img src="./logo.jpeg" style="width: 400px!important;" alt="沈志勇说">
我现在要引用这个组件,且把图片的宽度改成200px。由于是公共组件,不能动组件内部代码,这可如何是好?
意外之中,张大佬又给了我曙光:
方法一:max-width
max-width: 200px;
这个方法不仅兼容性好,而且简单明了。
方法二: 缩放
zoom: .5
这个方法也不错。
方法三: box-sizing
box-sizing: border-box;
padding: 0 100px;
这个方法是解决了图片显示的问题,但是img的占位置还是有 400px
如图:
方法四:
transform: scale(.5)
这个方法对浏览器版本有点要求,而且还和方法三有同样的问题。
方法五:
img{
animation: change 0s forwards;
}
@keyframes change {
from {
width: 400px;
}
to {
width: 200px;
}
}
这个方法我是在网上看到的,不得不佩服这位大佬的思路。
还有其他js的方法,这里就不列举了。
(文中场景因剧情需要,均为虚构!)