HTML 5 image adaptive screen img proportional scaling code for webpage HTML XNUMX

Due to the booming mobile Internet,Wechat marketingThe popularity of mobile phones has becomeLifemust-have tool.

Building websitetemplate, it is recommended to useWordPressAdaptive theme for:

What does CSS image adaptive mean?

CSS image adaptive means to make the images in the html web page, through CSS code:

Next,Chen WeiliangI will share with you the CSS img proportional scaling code ^_^

CSS image height and width adaptive code

Insert image in html:

If you want the image to adapt to the small size of the screen instead of staying fixed in width and height.

You can add the following code to the style.css file of your WordPress theme ▼

/*图片自适应宽度和高度*/ 
img { max-width: 100%; height: auto; width: auto\9; width: auto; }

statement heremax-widthmaximum width rule

• to ensure that all images are displayed at maximum 100% (i.e. they can only be displayed as large as their own images).
• At this point, if the element containing the image (for example, the body or div containing the image) is smaller than the image's inherent width, the image will be scaled to fill the maximum available space.

width:auto;means automatic width

\9 It is a way of writing hack css.

• In this way, "\9" is added to the normal css code, only IE browser can recognize it, other browsers will ignore this statement.
• This will achieve browser differentiation, enabling the purpose of compatible browsers.

Why not use width: 100%?

To achieve automatic scaling of images, you can also use the more commonly used width properties, e.g.width：100％.

However, this rule does not apply here.

• Because this rule will make it appear as wide as its container.
• In cases where the container is much wider than the image, the image will be stretched unnecessarily.

Please Note

What are CSS selectors? What is the difference between class and id?The following tutorials talk about ▼

What is the difference between CSS selector class and id? id and class usage in HTML

What is the difference between CSS selector class and id? The usage of id and class in HTML Chen Weiliang is currently performing SEO and optimizing the WordPress theme of the website.Although I have learned some basic HTML and CSS knowledge before, but I haven't operated it for a while, especially the CSS part...

How does the mobile website play MP4 video adaptive to the page?Please click the link below ▼

How does H5 webpage MP4 adapt to the page? Mobile website plays video html code

Video marketing is an integral part of online marketing: many online promotion practitioners often use video combined with "viral marketing" to drive traffic.If WeChat marketing is combined with video marketing, it can further improve the copywriting conversion rate of new media and social e-commerce.I have many friends...