Question 230223 in Html Question posted in
Some basic documentation can be found here.

Html – How to make images of different sizes all fit to be the same size?

I’m working on coding my graphic design portfolio website, and I’m working on creating a clickable gallery where I place images of my work in a grid. I’m able to set up the grid okay, but my pictures are all still different sizes and its messing up the grid.
the grid I’m working on looks like this:

It is my first time posting, I’m sorry if this isn’t explained well.

.gallery {
    width: 700px;
    display: flex;
}
.gallery div {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 20px;
    padding: 10px;
    flex: none;
}
.gallery div img {
    width: 400px;
    background-size: cover;
}
<div class="gallery">
  <div>
    <span><img src="images/cafe ole final-01 copy.png" alt="Cafe Ole"></span>
    <span><img src="images/Nintendo logo redesign-03.png" alt="Nintendo redesign"></span>
    <span><img src="images/shibuya airport logo branding-02 copy.png" alt="Shibuya Airport"></span>
    <span><img src="images/rocket wireless.png" alt="rocket wireless"></span>
    <span><img src="images/transfriend logo 2-02.png" alt="transfriend"></span>
    <span><img src="images/Spotify UI Design.png" alt="Spotify UI Design"></span>
    <span><img src="images/bapeshoead2-01 copy.png" alt=""></span>
  </div>
</div>
Tags:

3

Answers


  1. 0

    Try this out. Instead of an <img> tag just set the background-image style on each element and then you have full control in CSS of how it appears. If you use background-size: cover; it is cropped to a square in the middle of each image. If you instead use background-size: contain; you see the full image but it might have some empty space around it. It just depends what you want to do.

    .gallery {
  width: 700px;
  display: flex;
}
.gallery div {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 20px;
  padding: 10px;
  flex: none;
}
.gallery .thumbnail {
  border: 1px solid #CCC;
  width: 150px;
  height: 150px;
  background-repeat: no-repeat;
  /*background-size: contain;*/
  background-size: cover;
  background-position: center center;
}
    <div class="gallery">
  <div>
    <span class="thumbnail" style="background-image:url('https://picsum.photos/id/50/150/150');"></span>
    <span class="thumbnail" style="background-image:url('https://picsum.photos/id/51/100/150');"></span>
    <span class="thumbnail" style="background-image:url('https://picsum.photos/id/52/150/100');"></span>
    <span class="thumbnail" style="background-image:url('https://picsum.photos/id/53/200/150');"></span>
    <span class="thumbnail" style="background-image:url('https://picsum.photos/id/54/100/150');"></span>
    <span class="thumbnail" style="background-image:url('https://picsum.photos/id/55/100/150');"></span>
    <span class="thumbnail" style="background-image:url('https://picsum.photos/id/56/100/150');"></span>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    If you want your pictures are same sizes and it should not messing up the grid then you should try them with proper height and width and still if you seeing same issue try object-fit property.

    Login or Signup to reply.
  3. 0

    Try This;

    I wrapped each img with "a" tag for make them clickable. And target="_blank" is for the new tab but you can remove all if u want

    .gallery {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 20px;
    width: 700px;
}

.gallery a img{
  width: 100%;
  max-height: 150px;
  object-fit: cover;
}

    <div class="gallery">
    <a target="_blank" href="#"><img src="https://via.placeholder.com/200x200" alt="Cafe Ole"></a>
    <a target="_blank" href="#"><img src="https://via.placeholder.com/50x300" alt="Nintendo redesign"></a>
    <a target="_blank" href="#"><img src="https://via.placeholder.com/200x100" alt="Shibuya Airport"></a>
    <a target="_blank" href="#"><img src="https://via.placeholder.com/100x100" alt="rocket wireless"></a>
    <a target="_blank" href="#"><img src="https://via.placeholder.com/100x200" alt="transfriend"></a>
    <a target="_blank" href="#"><img src="https://via.placeholder.com/300x300" alt="Spotify UI Design"></a>
    <a target="_blank" href="#"><img src="https://via.placeholder.com/200x50" alt=""></a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search