When I was working on an activity management background, there was a function that required that when editing activities, there was a reduced preview image on the left for corresponding synchronization, and the panel on the right could be pulled up freely, that is, the length was not fixed. As shown in the figure.
The first scheme that comes to mind is to implement cSS3’s Transform: Scale. For example, if both sides render the same page, reduce the rendering of the preview image on the left to 0.3x (scale(.3)).
When you use Transform: Scale (.3), you’ll notice that the preview image on the left takes up the same amount of space as the larger image on the right, although it’s shrunk down to 0.3 times.
For the preview image on the left, you can make it smaller with a margin negative. Since our left and right are linked, when I adjust the height of the large image on the right, the height of the preview image will also change, resulting in the top of the preview image is not fixed
I googled it and realized that Zoom can also scale the page, but it’s a little different from Transform: Scale, because this article is a difference between the two
zoom
We first came into contact with Zoom when it was compatible with IE6 and IE7. For example, * Zoom: 1 could be used to clear ie6/7’s weird float problem
Currently, this property is well used in FireFox, Chrome and mobile browsers, and can be used to scale pages in addition to dealing with Internet Explorer compatibility
Its value can be:
Percentage value: for example, zoom:50%, indicating that it is reduced by half
Value: ZOOM :0.5, indicating that it is reduced to half of the original
Normal: zoom:normal equals zoom:1
Note: The value of zoom cannot be negative
transform:scale
Tranform :scale is supported by IE9+ and other major browsers. The value can be transform:scale (
[
]), or transform:scaleX() or transform:scaleY() can be used to scale the X axis or y axis separately. Transform: rotate(180deg); rotate(180deg); rotate(180deg); As shown in the figure
Both are
The same
The page can be scaled
The difference between
A. Compatibility:
Zoom works in all Internet Explorer, Chrome, and mobile browsers
Scale is compatible with IE9+
B. Value
Scale can scale in only one direction, like the X-axis, and can be negative. Zoom can’t
C. Zoom effect
Zoom scales relative to the upper left corner of the page. It can change the space occupied by the element after it is scaled. For example, a 100*100 page will occupy 50*50 space after it is doubled.
The minimum size of the zoom is 12 pixels, which means that even if you make the page 100 times smaller, the font will be at least 12px. Because of this, the layout of the page after scaling will be distorted, causing the page to be re-rendered. In the case of the Nuggets, this is what happens when you zoom to 0.3
The scale is centered on the page, so it doesn’t change the amount of space that elements take up, so if you double the size of a 100 × 100 page, you’re still 100 × 100. Again, take the nuggets as an example. The li in the red box has been scaled to 0.3 times, but the space it occupies remains the same
The text of scale can be scaled equally, for example, if you scale it by 100 times, the text will also be scaled by 100 times. It is equivalent to the overall scale of the page, so it will not change the layout and the page will not be re-rendered
In Chrome, scale and Zoom are used together to create a superimposed effect, meaning that a double zoom gives a double effect
conclusion
For normal page scaling, we’ll just use transform: Scale, which works well and has no performance issues. The final solution to the problem I encountered was to scale with transform:scale, write down the height of the preview image on the left, and then solve it with a margin negative.
This article is a knowledge of the discussion, investigate the reasons, learn more
Afterword.
I run a station in the front end, every Monday, three, five to update a few elite technology article, welcome to visit: xianyulaodi. Making. IO/fed – sites /