Home > Developer > Web Develop
With the upsurge of mobile development, there are more and more companies to the mobile development as the core, whether it is webapp or mobile phone page is so, in the process of development involves a web responsive picture of the problem, here we will discuss the implementation of the responsive picture
a simple response to picture implementationThe simplest implementation of a picture response is to set the width of the image to 100% and set the height to auto.
Example:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <title>Blog case</title> <styletype= "Text/css">img{width:100%;Height:Auto; } </style></Head><Body> <imgsrc= "Img1.jpg"></Body></HTML>
The effect is as follows:
It is generally possible to see that the image responds to the size of the window, but the effect of the recording tool rendering is not ideal.
But this method has a limitation, is completely as the screen becomes larger and smaller to stretch a picture, so that once the screen becomes larger, it is prone to the phenomenon of distorted images, this time we want to reach the maximum is to be able to display the original size of the image, the viewport becomes small, the picture is also changed.
This time the code can be improved like this:
img { max-width:100%; height:auto; }The advantage of this is to solve the image because of the change in response to the screen width caused by the phenomenon of distortion, here to explain is that the image is magnified to the extreme is the width of the original picture, if the screen is smaller than the picture, then the picture will respond to the size of the screen changes, while maintaining the width is stretched to 100%
In addition to the ability to set up a responsive picture, we can also set the image as a background image to achieve the response style
The idea is to use the image as a background and then add a background-size:contain to the background image; property
For example, we can rewrite the code above
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <title>Blog case</title> <styletype= "Text/css">Div{width:100%;Height:400px;Background-image:url (' img1.jpg ');background-repeat:no-repeat;background-size:contain;Border:1px solid Red; } </style></Head><Body> <Div></Div></Body></HTML>
Careful readers do not want to do this is still not solve the problem of the image response, so that is only to make the picture to adapt to the size of the screen, then finally to achieve the image of the response? Here our design ideas and the response layout is a bit similar, all through the setting of CSS media query to let the browser load different images under different circumstances, we can put the above example to rewrite
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <title>Blog case</title> <styletype= "Text/css">Body{background-repeat:no-repeat;Background-image:url (' img1.jpg '); }@media only screen and (min-width:400px){Body {background-image:url (' img2.jpg '); } } </style></Head><Body> <Div></Div></Body></HTML>
The effect of the operation is as follows:
Of course, in addition to the above method, in the HTML5 also provides the picture element, for the implementation of the responsive image, the use of the pictures element is a bit similar to the use of video and audio, all by adding a source tag underneath the tag to display the picture you want to display, The specific use cases are as follows:
<! DOCTYPE html>"en">"UTF-8"> <meta name="Viewport"Content="Width=device-width, initial-scale=1.0"> <title>blog case </title> <style type="Text/css">img {display:block; margin:0Auto;} </style>"(min-width:650px)"srcset="img1.jpg"> <source media="(min-width:465px)"srcset="img2.jpg"> "img3.jpg"alt="a cute kitten"> </picture></body>Analysis: Source is mainly used to display the image to be stored, and then IMG is not displayed by default, but if the browser does not support picture, the IMG will be displayed, to solve the label in different browser compatibility. Media in source is the response range used to specify a responsive picture, and Srcset is used to specify the source of the image.
This is the native image response implementation, run, the effect is the same as the above example
Vi. SummaryResponsive picture we can be as a knowledge point to carry out the reserve can be, the principle of implementation is also a variety of, but recommended that you use picture to achieve, one is to achieve a comparative specification, the other is able to meet the requirements of loading on demand, if you feel that this article has been or helpful to you, please do not hesitate to praise
Implementation of web responsive picture design
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
