No replies
StephenBerry's picture
Last seen: 1 year 12 weeks 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">
        <td class="colcontainer">
            <img src="images/itet and her son.jpg" alt="big">
        <td class="colcontainer">
            <img src="images/Nofret and Rahotep's statue.jpg" alt="big">
       <td class="colcontainer">
            <img src="images/The Meidum Geese.jpg" alt="big">
       <td class="colcontainer">
            <img src="images/Faiyum_oasis.png" alt="big">
  </table><!-- col end -->

I would appreciate any help.

example of images in div.jpg34.69 KB