The core of responsive images is to adapt the picture to the screen and maintain proportion. 1. Set width: 100% and height: auto to achieve basic adaptation; 2. Use the <picture> tag to load pictures with different resolutions with srcset and media attributes; 3. Control the filling method through object-fit, such as cover cropping, contain white space, and fill stretching. These methods ensure that the image display is appropriate and performance is optimized under different devices.

The image is displayed properly on different devices, which is an important part of the web experience. The core of using CSS to implement responsive pictures is to allow the pictures to automatically adapt to the screen size while keeping the proportions not stretched or compressed.

Image width adaptive

The easiest way is to set width: 100% for the image so that the image will scale as the width of the container changes. With height: auto , the original aspect ratio can be maintained and the deformation can be prevented.

 img {
  width: 100%;
  height: auto;
}

After doing this, the image will automatically adjust the size, whether in the mobile phone or desktop browser, just fill the container without overflowing. This is the basic operation of responsive images and is suitable for almost all image display scenarios.

Load different pictures for different resolutions

Sometimes you may not want to use the same image to display the same on all devices. For example, the mobile phone does not need a large, high-definition image, otherwise it will be slow to load and waste traffic.

You can use the HTML <picture> tag to match srcset and media attributes to load appropriate pictures according to different screen widths:

 <picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(max-width: 900px)">
  <img src="/static/imghw/default1.png"  data-src="large.jpg"  class="lazy" alt="example picture">
</picture>

The above code means:

• If the screen width is less than or equal to 600px, load small.jpg
• If it is between 601 and 900px, use medium.jpg
• If it exceeds 900px, use large.jpg

This method is suitable for websites with high performance requirements, such as e-commerce, blogs, etc.

Control the adaptation method of image objects

Sometimes, images are not displayed separately, but are used as a background or part of a fill element in an area. At this time, object-fit can be used to control how the image adapts to the container.

Commonly used values are:

• object-fit: cover : maintain proportional cropping and cover the entire container, suitable for avatars, card covers, etc.
• object-fit: contain : display the image in full, may leave white space
• object-fit: fill : forcefully fills the container, may deform

For example, if you make a fixed-size picture card, you can write it like this if you want each picture to be filled but not deformed:

 .card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

In this way, the effect can be displayed uniformly regardless of whether the image itself is horizontal or vertical.

Basically these common methods. Implementing responsive pictures is not complicated, but you should pay attention to several key points: maintaining the proportion, selecting the image source reasonably, and adjusting the display method according to the purpose. If these details are done, the webpage will look more professional.

The above is the detailed content of Implementing responsive images with CSS. For more information, please follow other related articles on the PHP Chinese website!