你TMD的竟然在代碼裏面下毒！

情景如下：

沈志勇，你看一下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的方法，這裏就不列舉了。

（文中場景因劇情需要，均爲虛構！）