How to create a responsive image gallery display layout using HTML and CSS

How to use HTML and CSS to create a responsive picture gallery display layout

In today's Internet era, picture gallery display is a common layout in web design, which can display various Pictures and graphic works. In order to allow users to have a good browsing experience on different devices, responsive design is becoming more and more important. This article will introduce how to use HTML and CSS to create a responsive image gallery display layout, and provide specific code examples.

Step 1: Create a basic HTML structure

First, we need to create a basic HTML structure. We will use an unordered list (

) to contain all image elements, and use list items (
• ) to wrap each image. Within each list item, we will use the tag to embed the image.

  <div class="gallery">
    <ul>
      <li><img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1"></li>
      <li><img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="Image 2"></li>
      <li><img src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="Image 3"></li>
      <!-- 添加更多图片 -->
    </ul>
  </div>

  Step 2: Apply CSS Styles

  Next, we need to add some CSS styles to the image gallery to create a gallery with a responsive layout. First, we need to define the height and width of the gallery. To achieve a responsive design, we will use percentages to define the width.

  .gallery {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .gallery ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .gallery li {
    display: inline-block;
    width: 30%;
    padding: 10px;
    box-sizing: border-box;
  }
  
  .gallery img {
    width: 100%;
    height: auto;
  }

  With the above CSS style, we define the width of the gallery container to be 100%, but the maximum width is 1200px. Each list item (i.e. image) has a width of 30% and has 10px padding.

  Step 3: Implement responsive design

  In order to implement responsive design, we can use media queries to adapt to different screen sizes. To make the gallery layout display better on small screen devices, we can do this by changing the width of each list item.

  @media screen and (max-width: 768px) {
    .gallery li {
      width: 50%;
    }
  }
  
  @media screen and (max-width: 480px) {
    .gallery li {
      width: 100%;
    }
  }

  The above CSS code uses media queries to change the width of the list items on small screen devices to 50% and 100% respectively to adapt to different screen sizes.

  Through the above steps, we successfully created a responsive image gallery display layout. This layout can adapt to different screen sizes on different devices and provide a good user experience.

  Summary

  This article introduces how to use HTML and CSS to create a responsive image gallery display layout. By setting up the HTML structure and applying CSS styles, we can achieve a responsive design that adapts to different screen sizes. I hope this article helped you understand responsive design and create image gallery layouts.

The above is the detailed content of How to create a responsive image gallery display layout using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!