Shulou(Shulou.com)06/01 Report--

This article mainly shows you "css pictures how to achieve self-adaptation", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "css pictures how to achieve self-adaptation" this article.

1. First, let's create an .html file and put one of our pictures in it. The code is as follows

Title

two。 To create a .css file, we set the style in the css file so that we can get the desired adaptive effect code as follows:

# web_bg {position: fixed; top: 0; left: 0; width: 100%; height: 100%; min-width: 1000px; z-index:-10; zoom: 1; background-color: # fff; background-repeat: no-repeat; background-size: cover;-webkit-background-size: cover -o-background-size: cover; background-position: center 0;}

We can implement adaptive images in this code, and in the code in the css file, position: fixed; top: 0; left: 0; this style is to keep our box div fixed at the top and left of the screen. So after the fixed completion, we use the code width: 100%; height: 100%; min-width: 1000pxposibackground repeat: no-repeat; so that our picture can be the same size as the screen without dragging or zooming out so that we can't achieve a tiling effect. The purpose of min-width is to keep the size of the div unchanged when the screen width is less than 1000px, that is to say, when the screen width is scaled, the picture should not be scaled (valid only within 1000px).

The above is all the content of the article "how to adapt css pictures". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.