No replies
StephenBerry
StephenBerry's picture
Offline
newbie
Last seen: 18 weeks 6 days ago
Timezone: GMT+1
Joined: 2021-09-03
Posts: 1
Points: 2

I am attempting to create an image container where different sized images (height and width) fit in a div so that they all look the same height and width - think slide show. What I have created so far, does shrink the images but does not alter them to fit. So, although the same width, they are not the same height. I have attached an image of how the images look.

This is the css:

.col {
  width: 80%;
  margin: auto;
}
.colcontainer {
  vertical-align: top;
  width: auto;
  height: auto;
}
.colcontainer img {
  width: 75%;
  height: 75%;
  object-fit: contain;
}

This is the html:

<table class="col">
    <tbody>
      <tr>
        <td class="colcontainer">
            <img src="images/itet and her son.jpg" alt="big">
        </td>
        <td class="colcontainer">
            <img src="images/Nofret and Rahotep's statue.jpg" alt="big">
        </td>
       <td class="colcontainer">
            <img src="images/The Meidum Geese.jpg" alt="big">
       </td>
       <td class="colcontainer">
            <img src="images/Faiyum_oasis.png" alt="big">
       </td>
     </tr>
    </tbody>
  </table><!-- col end -->

I would appreciate any help.

AttachmentSize
example of images in div.jpg34.69 KB