CODEWITHSUNDEEP
htmlcssframeworks
Pinteco
Pinteco

Reputation: 319

How to make an image gallery like one implemented in Instagram? (all images with the same size)

What I mean is, my image gallery (that a made using html code from a premade template that I found in the internet) is like this, all pictures have different sizes: enter image description here

But with Instagram, they all look the same size: enter image description here

My question is: How do I make all images have the same size? Is there a already made template somewhere?

Edit: It seems that even if pictures have different sizes, which is expected, Instagram kinda "crops" the image and shows only a portion of it to keep the same size, but not making it distorced. This is what I want...

Upvotes: 0

Views: 1159

Answers (2)

Colorado Akpan
Colorado Akpan

Reputation: 306

This Should Help

   body{
      background: black;
    }
      .style{
        float: left;
        padding: 10px;
      }
      img {
    height: 150px;
    width: 100%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
      <div class="style">
        <img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
      </div>
      <div class="style">
        <img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
      </div>
       <div class="style">
        <img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
      </div>
      <div class="style">
        <img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
      </div>
       <div class="style">
        <img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
      </div>
      <div class="style">
        <img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
      </div>
  </body>
</html>

Upvotes: 0

Luffy D. Monkey
Luffy D. Monkey

Reputation: 116

Set a specific height and width to all the images, You can do this using CSS:

<style>
  img {
     height: 100px;
     width: 100px;
  }
</style>

Upvotes: 1

Related Questions