The situation is as follows: Shen Zhiyong, please have a look at the XXX project in GITLab. This is one of our old projects. We’re going to add some new functionality based on this old framework. “Said the boss. To be honest, I’m afraid of taking on old projects. There’s no telling how many holes there are. God pays off, really let me find a pit. In a common component, I have an IMG image that somehow has a fixed width, not only on the line style, but also on me ‘! Important ‘. As soon as I saw the code, I was like,

<img src="./logo.jpeg" style="width: 400px! important;" alt="Shen Zhiyong said">  
Copy the code

I will now reference this component and change the width of the image to 200px. Because it is a common component, you cannot touch the internal code of the component. What can you do about that?

In the accident, Big Man Zhang gave me another dawn:

Method 1: max-width

max-width: 200px;
Copy the code

Method two: Zoom

zoom: .5
Copy the code

Box-sizing

 box-sizing: border-box;
 padding: 0 100px;
Copy the code

This method solved the image display problem, but the img position is still 400px as shown below:

Method 4:

transform: scale(.5)
Copy the code

This method is somewhat browser – dependent and has the same problems as method 3.

Method 5:

img{ animation: change 0s forwards; } @keyframes change { from { width: 400px; } to { width: 200px; }}Copy the code

This method I see on the net, have to admire this big guy’s train of thought. There are other JS methods that I won’t list here.

(The scene is fictional because of the plot needs!)