How to create a responsive photo album display layout using HTML and CSS

How to use HTML and CSS to create a responsive photo album display layout

The photo album display layout is a common page layout type in websites, which can be used to display pictures, Photos, images, etc. In today's environment where mobile devices are popular, a good photo album display layout needs to have a responsive design that can adapt to different screen sizes and have good display effects on different devices.

This article will introduce how to use HTML and CSS to create a responsive photo album display layout, and provide specific code examples. I hope readers can understand and master this process through the sample code.

HTML structure

First, we need to create the HTML structure for album display. The following is a simple HTML structure example:

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

In the above example, we used a container named gallery to contain all the photos in the album. Each photo is tagged using the photo class. The address and description information of the image can be obtained through the src and alt attributes of the img element. specified.

CSS Style

Next, we need to add CSS styles to the album display layout. Here is a basic CSS styling example:

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

.photo {
  width: 30%;
  margin-bottom: 20px;
}

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

In the above example, we first used display: flex to arrange the photo layout in the .gallery container in a row. Then use flex-wrap: wrap to achieve the effect of automatic line wrapping when the photo exceeds one line. justify-content: space-betweenUsed to set the alignment of photos in the container.

For each photo, we use the .photo class to set its width and bottom margin. To ensure that the photo automatically resizes on different screen sizes, we use a relative width of width: 30%.

Finally, we set the width and height of the photo through the .photo img selector. width: 100% means that the width of the picture fills the .photo container, height: auto is used to maintain the aspect ratio of the picture.

Responsive Design

The key to implementing responsive design is to use CSS media queries to apply different styles based on the screen size of different devices. Here is an example of responsive design:

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

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

In the above example, we have used the @media rule to create two media queries. The first media query max-width: 768px will take effect when the screen width is less than or equal to 768px, so we set the width of .photo to 45%. This ensures that the photo will fit on the screen on medium-sized devices.

The second media querymax-width: 480px will take effect when the screen width is less than or equal to 480px, so we set the width of .photo to 100%. This ensures that the photo takes up the full width of the screen on devices with small screens.

Summary

With the above HTML and CSS code examples, we can create a simple responsive photo album display layout. By using flex layout and media queries, we can ensure that the album displays well on different devices and adapts to the screens of different devices.

Of course, the above example is just a simple demonstration, and you can customize and modify it according to your needs and specific circumstances. I hope this article can help you. If you have any questions or needs, please leave a message for discussion.

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