0

I am attempting to create an image gallery using w3.css. I am constructing it with w3-cell-row and w3-cell elements. When I place images of varying size in these w3-cell elements the images will display with unequal heights, contrary to how you would believe they would from reading this: https://www.w3schools.com/w3css/w3css_layout.asp

I will put some code here that shows the problem:

<!DOCTYPE html>
<html>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- link css -->
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <head>
    <title> test </title>
  </head>

  <body>
    <div class="w3-cell-row">
      <div class="w3-cell">
        <img src="http://shashgrewal.com/wp-content/uploads/2015/05/default-placeholder-300x300.png" style="width:100%;" >
      </div>
      <div class="w3-cell">
        <img src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder.png" style="width:100%;" >
      </div>
      <div class="w3-cell">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4zIFE2vpdnB_b_qmWEa2NBKd_vFa_7f5XQpZUcyKs6vNNN85G" style="width:100%;" >
      </div>
    </div>
  </body>
</html>

As you can see the images are displayed with varying heights. My expectation would be that the widths of the images would change to create a uniform cell height across the row.

Isaac Gomes
  • 410
  • 1
  • 6
  • 15
mono
  • 23
  • 3

1 Answers1

0

Andrew, you are missing another concept of 'Layout cells Adjust to equal heights', please refer to that section.

In your example I added cell colors to be red green and blue and you can see whats happening. width wont impact height but height impacts other cells height.

Also you can refer to Images URL for responsive images.

Hope this helps!!

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">


<!-- link css -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<head>
<title> test </title>
</head>

<body>


<div class="w3-cell-row">

<div class="w3-cell w3-red">
    <img src="http://shashgrewal.com/wp-content/uploads/2015/05/default-placeholder-300x300.png" style="width:100%;" >
</div>

<div class="w3-cell w3-green">
    <img src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder.png" style="width:100%;" >
</div>

<div class="w3-cell w3-blue">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4zIFE2vpdnB_b_qmWEa2NBKd_vFa_7f5XQpZUcyKs6vNNN85G" style="width:100%;" >
</div>

</div>


</body>
karthik
  • 150
  • 9