Display image in flexbox side by side and same size?

Question

I have put the images side by side successfully but it ends up with different sizes using flexbox

I'm hoping for some help which can display the image with same size in a same row.

CSS CODE

<style>
        *{
            margin:0;
            padding: 0;
            box-sizing: border-box;
        }

        .row{
            padding-top: 50px;
            display: flex;
            align-items: center;
            flex-wrap:wrap;
            justify-content: space-around;
        }
        .product{
            flex-basis:25%;
            margin: 5px;
            padding:5px;
            max-width: 200px;
            margin-bottom: 50px;
            transition: transform 0.5s;
        }
        .product:hover {
            transform: translateY(-5px);
        }
        .pro-con {
            background-color: #3369FF;
        }
        .row>img{
            height: 100%;
            width:auto;
            transition: transform 0.5s;
        }
        h2{
            text-align: center;
        }
        p{
            color:black;
            text-align: center;
        }

    </style>

HTML

<body>

<h1 style="text-align: center">ALL PRODUCTS</h1>

<%
    Class.forName("com.mysql.jdbc.Driver");
    Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/users", "root","123456767");
    Statement stm = conn.createStatement();
    ResultSet rs = stm.executeQuery("SELECT * FROM users.product\n");

    int cnt = 1;
    while(rs.next())
    {
        ++ cnt;
        if(cnt % 2 == 0)
        {
%>

<div class="row">
    <div class="product">
        <div class="pro-con">
        <a href="Bdetail.jsp?pid=<%=rs.getString("product_id")%>">
        <img src="./ProductDisplayServlet?product_id=<%=rs.getString("product_id")%>"/>
        </a>
        <h2><%=rs.getString("product_name")%></h2>
        <p><%=rs.getString("price")%></p>
        </div>
    </div>
    <%
    }
    else {
    %>
    <div class="product">
        <div class="pro-con">
        <a href="Bdetail.jsp?pid=<%=rs.getString("product_id")%>">
        <img src="./ProductDisplayServlet?product_id=<%=rs.getString("product_id")%>"/>
        </a>
        <h2><%=rs.getString("product_name")%></h2>
        <p><%=rs.getString("price")%></p>
        </div>
    </div>
    <%
            }
    </div>
    }
    %>
</body>

I'm hoping for any help as I'm hoping to display 4 images of different sizes in a row yet they can display in different sizes. Any tutorial or help would be much appreciated!

Welcome to Stack Overflow. It would help a lot if you could attach a [Minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) along with the things you have tried to solve the problem. — Raheel Junaid, Jan 02 '21 at 17:33
Does this answer your question? [How can I make all images of different height and width the same via CSS?](https://stackoverflow.com/questions/19414856/how-can-i-make-all-images-of-different-height-and-width-the-same-via-css) — Raheel Junaid, Jan 02 '21 at 17:36

score 0 · Answer 1 · answered Jan 02 '21 at 18:53

You can use the background-image property and fixed-width containers for this.

.img-wrapper {
  width: 100%;
  height: 0;
  padding-top: 100%;
  background-size: cover;
  background-repeat: none;
  background-position: center;
}

.container {
  display: flex;
  justify-content: center;
}

.card {
  width: 100px;
  margin: 0 10px;
  text-align: center;
  border: 1px black solid;
  padding-bottom: 30px;
}

<div class="container">
  <div class="card">
    <div class="img-wrapper" style="background-image: url('https://dummyimage.com/600x400/000/adfffc')"></div>
    Card 1
  </div>
  <div class="card">
    <div class="img-wrapper" style="background-image: url('https://dummyimage.com/400x600/000/fff')"></div>
    Card 2
  </div>
  <div class="card">
    <div class="img-wrapper" style="background-image: url('https://dummyimage.com/1300x200/000/ffabff')"></div>
    Card 3
  </div>
</div>

As you can see, this ensures all of the images are in a fixed-width container. If the container (or the .card class) were to increase in width, the images would increase proportionally due to the padding-top: 100%; property. This property is based on the width of the container.

This essentially means that it will increase the height of the container as the width increases, making it a square/1:1 aspect-ratio

If you wish to fit the image inside of the .img-wrapper container, you can replace background-size: cover with background-size: contain instead.

Display image in flexbox side by side and same size?

1 Answers1