0

I've been trying to line up my images to the same size, using CSS and HTML tags, currently this is what I've come up with, there are just a few pictures that don't seem to follow the directions. I have tried different ways to describe the width (e.g: vw, hf, px or %), though those tags don't seem to completely sort the problem out here. The width is alright, yet the height on some pictures is not. All pictures have different original sizes, only the last 3 pictures are exactly the same original size.

I have definitely tried finding the same issue asked elsewhere on the internet, but I haven't found anything related yet.
Any ideas on how to fix this, without having to manually edit all the pictures to the thumbnail size?

This is what the images currently look like.

code

.main-container {
max-width: 60%;
max-height: 44.44%;
margin-left: 19.6875%;
margin-top: 20%;
padding: 10px;
overflow: hidden;
background-color: #FEF39F;
}
.imgclass {
   border: 1px solid #ddd;
   border-radius: 4px;
   padding: 5px;
   max-width: 13.5vw;
   max-height: 15hz;
}
img.imgclass:hover {
   box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
Samuel
  • 1
  • 3
  • Does this answer your question? [How do I auto-resize an image to fit a 'div' container?](https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container) – Awais Mar 24 '20 at 12:15

1 Answers1

0

max-height and max-width will only specify that the image should not be more than the specified height and width respectively. Try something like img { height: 200px; width: 100%}

May be you wanna do this:

* {
  box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.column img{
  height: 250px;
  width: 100%;
}

@media screen and (max-width: 600px) {
  .column {
      width: 50%;
  }
  .column img {
      height: 180px;
      width: 100%;
  }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>Four Equal Columns</h2>

<div class="row">
  <div class="column">
   <img src="https://picsum.photos/600/600" >
  </div>
  <div class="column">
   <img src="https://picsum.photos/700/600" >
  </div>
  <div class="column">
   <img src="https://picsum.photos/600/600" >
  </div>
  <div class="column">
   <img src="https://picsum.photos/600/600" >
  </div>
</div>
<div class="row">
  <div class="column">
   <img src="https://picsum.photos/600/600" >
  </div>
  <div class="column">
   <img src="https://picsum.photos/400/600" >
  </div>
  <div class="column">
   <img src="https://picsum.photos/500/600" >
  </div>
  <div class="column">
   <img src="https://picsum.photos/600/600" >
  </div>
</div>

</body>
</html>
James
  • 135
  • 3
  • 6
  • Before posting here, I used height and width without ''max-'' in front of it, since this didn't change anything I thought I'd might aswell just show it this way. I'm still searching for a solution. I want the images to take on a specific pre-made height and width, no matter their original size, nor their position. I'll add this to the original post as an edit. – Samuel Mar 24 '20 at 15:02