Jump to content
Sign in to follow this  
JoshuaVdM

W3.CSS: responsively crop image to square

Recommended Posts

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...