How to make images adaptive with css? Introduction to the method of adaptive size of css images

For a web page, it is very attractive to have a good-looking and clear background image, but not every image is the same size, so it is necessary to adapt the Xi'an image. So, how about css How about making images adaptive? This article will introduce the method of adaptive size of css images.

Let’s take a look at an example directly:

<div class="wrapper">
    <!--背景图片-->
    <div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
    <!--其他代码 ... --></div>

#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;
}

For the above example, let’s analyze how this css code makes the image adaptively resized.

First of all, let’s take a look at the role of these three sentences in css image adaptive size:

  position:fixed;  
  top: 0;  
  left: 0;

Description: These three sentences make the entire div container fixed at the top and bottom of the screen. left.

Next, let’s take a look at the role of the following sentences in css image adaptive size:

  width:100%;  
  height:100%;  
  min-width: 1000px;

Description: These sentences make the entire div the same size as the screen, thus achieving full screen The purpose of min-width is to keep the size of the div unchanged when the screen width is within 1000px. That is to say, in this case, when scaling the screen width, the image should not be scaled (it is only valid within 1000px).

Next let’s take a look at this code:

  z-index:-10;

Description: This is to put the entire div below each level in the HTML page. Under normal circumstances, the first created level z The value of -index is 0, so if we write -1 here, it can also be achieved. However, writing -10 here ensures that the entire div is at the bottom, because if there are too many levels in the page, sometimes using -1 may not necessarily be at the bottom. below, but it doesn’t make sense if it’s written as a large number like -100. Use index:-10 In this way, it can look like a background image, but it is actually the most ordinary div. Only the hierarchical relationship has changed to make it look like a background image.

  background-repeat: no-repeat;

Note: This is the background, don’t repeat it.

  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;

Explanation: The above three sentences have the same meaning, which is to make the image scale synchronously with the screen size, but some parts may be cropped, but it will not be exposed. The following two sentences are for chrome and opera browsers compatible.

Finally, let’s take a look at the last sentence:

background-position: center 0;

Explanation: The above sentence means the position of the picture, centered and aligned to the left.

The above article ends here. If you want to know more about the various properties mentioned in the above css code, you can refer to css manual.

Related recommendations:

css image adaptive size_image special effects

How to use css to make images adapt to the screen ?

The above is the detailed content of How to make images adaptive with css? Introduction to the method of adaptive size of css images. For more information, please follow other related articles on the PHP Chinese website!