W3.CSS: responsively crop image to square

[JoshuaVdM]

I've got this responsive image gallery, made with W3.CSS

<div id="portraits" class="w3-row tab">
     <div class="w3-half">
          <img src="img/img1.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in">
          <img src="img/img2.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in">
     </div>
     <div class="w3-half>
          <img src="img/img3.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in">
          <img src="img/img4.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in">
     </div>
</div>
<--! more stuff here -->...

These images are all in different aspect ratios. So at the bottom of the image gallery, the images don't match up; 1 half is longer than the other.

I've looked for answers.

Putting the image in the div etc... doesn't work...

I'm new here, and also relatively new to css3, so if you need more information to help me out, feel free to ask.

 

Thanks in advance!

 

(attached document is the HTML file. I'm using w3-third instead of w3-half, doesn't matter though)

 

portfolio.html

[Sunamena]

Hello,


Try to use a CSS file to style. Using inline CSS ( style="" ) will make editing your website hard, and will make it even harder to build one.
One CSS file can be aplied to multiple webpages.

As to solve your problem, why not consider using a Flex box?
http://www.w3schools.com/css/css3_flexbox.asp