Home > Developer > Web Develop
[CSS] response-type image and css response
Source image: (1680px in width and 1050px in height)
However, when the images in are larger than the viewport, as shown in:
At this time, we can use responsive technology to solve the problem:
When the browser's screen size changes, the image will change as the window size changes, and the image will not be truncated or a horizontal scroll bar will appear.
HTML code:<body> </body>
CSS code:
Img {width: 100%;/* if it is set to percentage, OK */max-width: 100%;/* to ensure that the image is not stretched, add this CSS attribute */}
Effect:
The preceding example shows how to insert an img tag. What if it is a background image?
HTML code:
<body> <div class="backgroundImgShow"> <p class="text">12111111111111111444444444444444444444444444445555555555555</p> </div></body>
CSS code:
body,div,p{margin: 0;padding: 0;}.backgroundImgShow {background: url(1.jpg) no-repeat 50% 50%;}.text{color: white;word-wrap: break-word;font-size: 30px;}Generally, when the content height is smaller than the background image height, the background image cannot be displayed as a whole, as shown in:
At this time, we may think of setting the same height as the background image for the content area. For example, if my sample image is 1680px * 1050px, then my CSS height value can be set to 1050px;
body,div,p{margin: 0;padding: 0;}.backgroundImgShow {background: url(1.jpg) no-repeat 50% 50%;-webkit-background-size: 100%;background-size: 100%;height: 1050px;}.text{color: red;word-wrap: break-word;font-size: 30px;}In this way, the background image can be scaled proportionally, but the image has a blank height of 1050px from the top of the browser,
In this case, the height is removed and the CSS code is changed:
Body, div, p {margin: 0; padding: 0 ;}. backgroundImgShow {background: url(1.jpg) no-repeat 50% 50%;-webkit-background-size: 100%; background-size: 100%; padding-top: 62.5%; /* 1050/1680 = 0.625 divide the height by the width to solve the problem of the proportion of the background image */}. text {color: red; word-wrap: break-word; font-size: 30px ;}The effect is as follows:
We can see that there is still a white edge on the image, and the text is not completely in the image. At this time, we can further optimize it. We can change the background-size: 100%Background-size: cover;This means that the background image is filled with containers that wrap it and scaled proportionally. :
However, the text is down, because padding-top: 62.% is set above, so there will be a large margin, you can setMargin-top:-62.5%;To cancel the margin. Final diagram:
Final CSS code:
body,div,p{margin: 0;padding: 0;}.backgroundImgShow {background: url(1.jpg) no-repeat 50% 50%; -webkit-background-size: cover;background-size: cover;padding-top: 62.5%; }.text{color: red;margin-top: -62.5%;word-wrap: break-word;font-size: 30px;}
Author: Zhizhi
Sign: The road is long, and I will go up and down.
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
