Responsive pictures can be implemented in five ways: 1. Use max-width: 100% and height: auto to ensure that the picture is scaled in the container and maintains the aspect ratio; 2. Use object-fit to control the image filling method, cover crop filling, contain and display it in full; 3. Use srcset and sizes attributes to load the appropriate pictures according to the device to improve performance; 4. Use background-size: cover to realize responsiveness of decorative background images; 5. Use Flexbox or Grid layout to create a responsive picture grid, which automatically adapts to different screen sizes. Each method is suitable for different scenarios and needs attention to details such as height: auto to prevent deformation.

Responsive Images are very important in modern web design, ensuring that images can be displayed well on different devices and screen sizes while optimizing loading performance. Here are several common methods and examples for implementing responsive images in practical CSS.

1. Use max-width and height: auto

This is the most basic and most commonly used responsive picture method. Let the image scale inside the container to avoid overflow.

 img {
  max-width: 100%;
  height: auto;
  display: block;
}

illustrate:

• max-width: 100% : The maximum width of the image does not exceed its container.
• height: auto : Maintains the original aspect ratio and prevents deformation.
• display: block : Remove the default blank gap below the picture.

HTML example:

 <div class="container"   style="max-width:90%">
  <img src="/static/imghw/default1.png"  data-src="photo.jpg"  class="lazy" alt="example picture">
</div>

2. Use object-fit to control the image filling method

When the image needs to be filled with fixed-size containers (such as avatars, card images), object-fit can be used to maintain the scale and crop or scale.

 img.cover {
  width: 300px;
  height: 200px;
  object-fit: cover; /* Crop to fill*/
  object-position: center; /* centered crop*/
}

 img.contain {
  width: 300px;
  height: 200px;
  object-fit: contains; /* full display, blank */
}

Applicable scenarios:

• cover : picture background fill (such as article cover).
• contain : The image content needs to be fully displayed (such as product pictures).

3. Use srcset and sizes attributes (HTML CSS cooperation)

Load pictures of different sizes according to the device resolution and viewport width to improve performance.

 <img src="/static/imghw/default1.png"  data-src="small.jpg"  class="lazy" 
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 480px) 100vw, (max-width: 800px) 50vw, 33vw"
  alt="responsive picture"
>

explain:

• srcset : Provides image resources of different widths.
• sizes : defines the display width of the image under different conditions.
• The browser automatically selects the most suitable image to download.

4. Use background background-size

Suitable for decorative images, responsive through CSS background.

 .hero {
  height: 400px;
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

HTML:

 <div class="hero"></div>

advantage:

• More flexible control of image display (such as blur, superimposed color).
• It does not affect the page content flow.

5. Responsive picture card layout (combined with Flex/Grid)

Combined with Flexbox or Grid to implement image grids, each image is responsive.

Using Flexbox:

 .flex-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.flex-gallery img {
  flex: 1 1 200px; /* Minimum 200px, scalable*/
  max-width: 100%;
  height: auto;
}

Using Grid:

 .grid-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.grid-gallery img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

Advantages:

• Automatically adapt to screen width.
• On the small screen, it becomes a single column, and on the large screen, it becomes a multiple column.

Basically these common methods. You can choose according to the purpose of the image:

• Content picture → max-width: 100% srcset
• Decorative picture → background-size: cover
• Fixed size display → object-fit
• Multi-picture layout → Grid/Flex responsive picture

It is not complicated, but it is easy to ignore details. For example, forgetting height: auto will cause the picture to deform.

The above is the detailed content of css responsive image examples. For more information, please follow other related articles on the PHP Chinese website!