CSS Flexbox - Responsive Image

Quiz

Responsive image dynamically adjusts its size and layout based on the available space and screen size.

The following example demonstrates a flexible image gallery that adjusts its layout and image sizes to provide an optimal viewing experience on different screen sizes and devices.

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   .row {
      display: flex;
      flex-wrap: wrap;
      padding: 0 4px;
   }
   .column {
      flex: 20%;
      max-width: 20%;
      padding: 0 4px;
   }
   .column img {
      margin-top: 8px;
      vertical-align: auto;
      width: 100%;
   }
   @media (max-width: 500px) {
      .column {
         flex: 40%;
         max-width: 50%;
      }
   }
   @media (max-width: 300px) {
      .column {
         flex: 100%;
         max-width: 100%;
      }
   }
</style>
</head>
<body>
   <h2>Resize the browser window to see the effect</h2>
   <div class="row">
      <div class="column">
         <img src="images/orange-flower.jpg">
         <img src="images/pink-flower.jpg">
         <img src="images/white-flower.jpg">
      </div>

      <div class="column">
         <img src="images/red-flower.jpg">
         <img src="images/yellow-flower.jpg">
         <img src="images/see.jpg">
         <img src="images/tree.jpg">
      </div>

      <div class="column">
         <img src="images/white-flower.jpg">
         <img src="images/yellow-flower.jpg">
         <img src="images/orange-flower.jpg">
         <img src="images/pink-flower.jpg">
         <img src="images/see.jpg">
      </div>
   </div>
</body>
</html>

Print Page