HTML CSS??zoom learning_html/css_WEB-ITnose

When I was working on a phased project in college, I encountered a very strange phenomenon: kindEditor's function of uploading images failed, but it worked just fine after removing the styles referenced by jsp. This indicated that there was a problem with the styles, so I deleted a style and tested it. , so the culprit falls on zoom. This is the first time we "met each other". Today is the weekend, a rare leisure time. Let me summarize it now:

First, let’s talk about the role of zoom: zoom is used to set objects. Zoom attribute value: normal | |

1. Normal:

Code 1-1 is as follows:

                  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">  		<style type="text/css">			.test{zoom:normal;}		</style>				<h1 id="zoom">zoom</h1>		<h1 id="zoom">zoom</h1>		<h1 id="zoom">zoom</h1>	

Figure 1-1

Code 1-2 is as follows:

                  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">  		<style type="text/css">			.test{zoom:normal;}		</style>				<img  src="/static/imghwm/default1.png" data-src="./test.png" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="HTML CSS??zoom learning_html/css_WEB-ITnose" ><br>		<img  src="/static/imghwm/default1.png" data-src="./test.png" class="lazy" alt="HTML CSS??zoom learning_html/css_WEB-ITnose" ><br>		<img  class="test lazy" src="/static/imghwm/default1.png" data-src="./test.png" alt="HTML CSS??zoom learning_html/css_WEB-ITnose" >	

Figure 1-2

Summary:

a. Figure 1-1: As can be seen from the code The font size of the first "zoom" is "5pt", the font size of the second "zoom" uses the default value, and the font size of the third "zoom" is added to the "zoom:normal;" style list;

b. Figure 1-2 From the code, you can see that the width of the first image is "50", the height is also "50" and the size is "5pt". The second image size uses the default value. The "zoom:normal;" style list has been added to the three pictures;

Through the description of points a and b, we can get the conclusion: n normal is used to make the element use its actual size;

2. : Use floating point numbers to define the scaling ratio. Negative values ​​are not allowed;

Code 2-1 is as follows:

                  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">  		<style type="text/css">			.test{zoom:3;}		</style>				<h1 id="zoom">zoom</h1>		<h1 id="zoom">zoom</h1>	

Figure 2-1

Code 2-2 is as follows:

                  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">  		<style type="text/css">			.test{zoom:3;}		</style>				<img  src="/static/imghwm/default1.png" data-src="./test.png" class="lazy" alt="HTML CSS??zoom learning_html/css_WEB-ITnose" ><br>		<img  class="test lazy" src="/static/imghwm/default1.png" data-src="./test.png" alt="HTML CSS??zoom learning_html/css_WEB-ITnose" >		

Figure 2-2

3. : Use percentage to define the scaling ratio. Negative values ​​are not allowed;

Code 3-1 is as follows:

                  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">  		<style type="text/css">			.test{zoom:300%;}		</style>				<h1 id="zoom">zoom</h1>		<h1 id="zoom">zoom</h1>		

Figure 3-1

Code 3-2 is as follows:

                  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">  		<style type="text/css">			.test{zoom:300%;}		</style>				<img  src="/static/imghwm/default1.png" data-src="./test.png" class="lazy" alt="HTML CSS??zoom learning_html/css_WEB-ITnose" ><br>		<img  class="test lazy" src="/static/imghwm/default1.png" data-src="./test.png" alt="HTML CSS??zoom learning_html/css_WEB-ITnose" >		

Fig. 3-2

Note: Due to the defect of zoom compatibility, there are not many actual applications. Just a general understanding is enough.

【0 points to download demo resources】