Home >Web Front-end >HTML Tutorial >How to create a responsive image display layout using HTML and CSS

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

PHPzOriginal: 2023-10-19 09:10:42727browse

How to use HTML and CSS to create a responsive image display layout

In modern web design, responsive layout has become a standard, because more and more More people browse the web using devices of different sizes and resolutions. In this article, we will introduce how to use HTML and CSS to create a responsive image display layout.

First, we need an HTML file to build the page structure. In this file, we use HTML5 semantic tags to define the main layout structure. Here is a simple example:

<!DOCTYPE html>
<html>
<head>
  <title>响应式图片展示布局</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <div class="gallery">
      <div class="grid-item">
        <img src="image1.jpg" alt="Image 1">
      </div>
      <div class="grid-item">
        <img src="image2.jpg" alt="Image 2">
      </div>
      <div class="grid-item">
        <img src="image3.jpg" alt="Image 3">
      </div>
      <!-- 更多图片项... -->
    </div>
  </div>
</body>
</html>

Next, we need to create a CSS file to style our layout. The following is an example of a basic CSS stylesheet that can implement a simple responsive image display layout:

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
}

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

.grid-item {
  position: relative;
}

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

@media (max-width: 768px) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 480px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

In the above code, .container defines a main container , whose max-width property limits the width of the container to 100%, while the margin and padding properties center the content and add some padding.

.gallery is a container using CSS Grid layout, in which the grid-template-columns property sets the number and size of the grid's columns, repeat(auto-fit, minmax(300px, 1fr)) means that the size of the column is adaptive, and the minimum width is 300px.

In the @media rules, we use media queries to apply different styles for different screen sizes. When the screen width is less than 768px, we adjust the minimum width of the column to 200px. When the screen width is less than 480px, we will only display one image per row.

Actually, you need to save the above CSS code to a file called style.css and make sure the <link> in the HTML file The tag points to this CSS file.

The above are the steps and sample code to create a simple responsive image display layout using HTML and CSS. You can further extend and customize the style according to your needs. Hope this article helps you!

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

html5 css html auto 样式表内边距 margin padding

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to create a responsive photo album display layout using HTML and CSSNext article：How to create a responsive photo album display layout using HTML and CSS

See more

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

Related articles