1 reply [Last post]
StephenBerry
StephenBerry's picture
Offline
newbie
Last seen: 3 weeks 7 hours ago
Timezone: GMT+1
Joined: 2021-09-03
Posts: 1
Points: 4

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
micklernar
micklernar's picture
Offline
newbie
USA
Last seen: 1 week 11 hours ago
USA
Timezone: GMT+3
Joined: 2021-06-20
Posts: 3
Points: 3

Very useful information!

The web browser part of the software needs additional citations for verification. The software must support several web browsers and perform well. The software should connect to a server computer so that all the browser software components work together with https://mlsdev.com.