Home > Article > Web Front-end > How to create a responsive image gallery using CSS

How to create a responsive image gallery using CSS

王林forward: 2023-08-22 14:29:02819browse

Use CSS to create a responsive gallery, you can try running the following code

Example

Online demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div.myGallery {
            border: 2px solid orange;
         }
         div.myGallery:hover {
            border: 1px solid blue;
         }
         div.myGallery img {
            width: 100%;
            height: auto;
         }
         div.desc {
            padding: 20px;
            text-align: center;
         }
         .responsive {
            padding: 0 5px;
            float: left;
            width: 24.99999%;
         }
         @media only screen and (max-width: 700px) {
            .responsive {
               width: 49.99999%;
               margin: 5px 0;
            }
         }
         @media only screen and (max-width: 500px) {
            .responsive {
               width: 100%;
            }
         }
         .clearfix:after {
            content: "";
            display: table;
            clear: both;
         }
      </style>
   </head>
   <body>
      <div class = "responsive">
         <div class = "myGallery">
            <a target = "_blank" href="https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg">
               <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg" alt="3D Animation Tutorial"    style="max-width:90%"  style="max-width:90%">
            </a>
            <div class = "mydiv">3D Animation Tutorial></div>
         </div>
      </div>
      <div class = "responsive">
         <div class = "myGallery">
            <a target = "_blank" href = "https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg">
               <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg" alt="Swift Video Tutorial"    style="max-width:90%"  style="max-width:90%">
            </a>
            <div class = "mydiv">Swift Video Tutorial</div>
         </div>
      </div>
      <div class = "responsive">
         <div class = "myGallery">
            <a target = "_blank" href = "https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg">
               <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg" alt="CSS Video Tutorial"    style="max-width:90%"  style="max-width:90%">
            </a>
            <div class="mydiv">CSS Tutorial</div>
         </div>
      </div>
      <div class = "clearfix"></div>
   </body>
</html>

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

css

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：The Chinese translation of "Paged Media in CSS" is "paged media in CSS"Next article：The Chinese translation of "Paged Media in CSS" is "paged media in CSS"

See more

How to create a responsive image gallery using CSS

Example

Online demo

Related articles