How to create a responsive photo gallery layout using HTML and CSS

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

In modern web design, responsive layout is crucial. Web pages need to be able to adaptively resize layouts and elements as different sizes and devices are used. In this article, we will learn how to use HTML and CSS to create a responsive image gallery layout.

HTML structure

First, we need to define the HTML structure. Suppose our image collection layout contains several images, each image has a title and a description. In order to implement responsive layout, we can use an unordered list (<ul></ul>) to contain all image elements. The specific HTML structure is as follows:

<div class="gallery">
  <ul>
    <li>
      <img src="image1.jpg" alt="Image 1">
      <div class="caption">
        <h3>Image 1</h3>
        <p>Description of Image 1</p>
      </div>
    </li>
    <li>
      <img src="image2.jpg" alt="Image 2">
      <div class="caption">
        <h3>Image 2</h3>
        <p>Description of Image 2</p>
      </div>
    </li>
    <!-- 剩下的图片元素 -->
  </ul>
</div>

CSS Style

Next, we need to use CSS to style this image collection layout. First, we'll do some styling on the basic layout. In this example, we will use Flexbox layout to achieve horizontal alignment of the image and add some spacing. The specific CSS style is as follows:

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.gallery ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery li {
  width: 30%; /* 调整这个值来改变每行显示的图片数量 */
  margin-bottom: 20px;
}

.gallery img {
  max-width: 100%;
  height: auto;
}

.gallery .caption {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 10px;
  text-align: center;
}

In this CSS code, we use display: flex to create a Flexbox container and justify-content: space -betweendistributes the picture elements evenly. Use width: 30% to set the width of each image element so that three images can be displayed on the screen. You can adjust this value to change the number of images displayed in each row according to your needs.

Finally, we made some basic styling settings for the image and title. In order to achieve responsive layout, the image uses max-width: 100%, which ensures that the image is displayed correctly on devices of different sizes.

Media Query

The above style has created a basic responsive image collection layout for us. However, when the screen size changes, we may want to make some adjustments to the layout. At this time, we can use media queries (Media Queries) to apply different styles for different screen sizes. For example, we can set up two images per row for small screen devices and make the images fill the entire width. The specific CSS style is as follows:

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

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

In this CSS code, we use media queries to set different styles for screens with a maximum width of 768px and 480px. In the first set of media queries, we adjusted the number of images displayed per row from three to two. In the second set of media queries, we adjust the number of images displayed per row to one, so that the image fills the entire width.

Summary

Through the above steps, we successfully created a responsive image collection layout. By using HTML and CSS to define structure and styles, and using media queries to apply different styles for different screen sizes, we can provide a good user experience on different devices. This example is just one of the methods, you can flexibly adjust and modify it according to actual needs.

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