Home > Developer > Web Develop
Before the product ran over to ask me the existing template does not have a picture template, you need to add a picture template; However, he asked that the picture in the display area is best able to achieve as the window changes automatically by the image scale and so on zoom, and center display picture. I thought, aside from the technical realization level, the picture show should be this, more friendly. At that time I said there should be no big problem, so there is the following (PS: Meng New technology has not accumulated, only with a bit of accumulation and now investigate to investigate).
1. Picture equal than zoomOnline search for a piece of equal than zoom, have introduced the use:
Width:auto;
max-height:100%;
The use of this is not a big problem, two points I would add:
1. In fact, when the definition of max-height and max-width, there is no need to repeat the definition of width:auto, a little to think about the next, and the pro-test without width and height for auto is also the same effect.
2. There are netizens mentioned only add max-width for 100% on line, height let it wait than zoom. In fact, there are also inappropriate, such as:
When the picture has a parent (the 2 logo in the figure), and if the height is adjusted again, the picture goes beyond the parent element, which is obviously not what we want. Therefore, it is recommended to use both Max-width and max-height for 100%, width and height without setting.
The code is as follows:：< div style = "Position:relative;width:100%;heigth:500px;background: #c3e6c2;" > < img style = "max-width:100%; max-height:100%; Position:absolute; left:0; right:0; top:0; bottom:0; Margin:auto; "
Src >
</ div >
(1) When the parent element is large enough, the picture is displayed in its original size and centered
(2) When the window narrows, the picture shrinks
In fact, Max-width and max-height There are many other application scenarios, I did not do more summary, there is time to the two properties in other usage scenarios are introduced.
2. Proportional self-adapting layoutStraight to the point, similar implementations believe we all know that the core is the use of padding is relative to the width of the parent element (PS: The content width here relative to the parent element, even if the parent element exists padding, the percentage is relative to the content area, You can do your own experiment to verify).
If you want to achieve a 16:9 adaptive scale layout, the core code is as follows:
<!DOCTYPE HTML> <Bodystyle= "Background:beige;display:flex;align-items:center;"> <Divstyle= "position:relative; width:100%;p adding-top:56.2%; Background: #c3e6c2; "> <imgstyle= "max-width:100%; max-height:100%; Position:absolute; left:0; right:0; top:0; bottom:0; Margin:auto; "src= "Http://oc24816dq.bkt.clouddn.com/20090622131631-85311624%5B1%5D.bmp"alt=""> </Div> </Body></HTML>
：
The light green area is the effect of 16:9, which changes as the window changes to a 16:9 ratio. (56.2% = 9/16*100%)
Divergence: When width and padding are set to the same percentage, the self-adaptive square layout is implemented.
Expand thinkingInadvertently found that the CSS is more practical, and a slight change to achieve another layout, the code is as follows:
. middle{ Position:absolute; top:0; bottom:0; left:0; right:0;
Margin:auto; }This common code is used for horizontal vertical centering, where top and bottom are at the same time 0, indicating that the child element occupies the height of the parent element , while left and right are 0, indicating that the child element is full of the parent element width .
This code can be used to achieve a lot of common layout, and compatibility is very good, you can practice and summarize in the project.
1. Implement Sticky-footer. Principle: Set the element's bottom to 80px, while the bottom is fixed a div, set to position:fixed;height:80px;
：
(1) When there is not enough text in the content area
(2) When there is a lot of text in the content area, the scroll bar appears (the Mac scroll bar is automatically hidden), but the footer is still at the bottom
2. This code can also be achieved only horizontally centered or vertically centered, but also to achieve width, highly adaptive layout and so on. You can think about it yourself.
Summarize:This is recently applied to the project in the CSS code snippet, feel good to summarize share. If there are incorrect or better suggestions, please leave a message to discuss.
Attach a text about the response layout, personally feel good, share: https://yusi123.com/2539.html.
Welcome to recommend and attention, your encouragement is my driving force!!!
Remember the product requirements: pictures and more than scaling and CSS adaptive layout 16:9
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
