Making Images all same size

Question

I want all of my images to be the same size on my home page. However when I add the photos, some are not the same height. I would like for them to all be the same without stretching but instead by filling and cropping. How do I do this? Thank you!

img {
  overflow: hidden;
  max-width: 100%;
  height: auto;
  margin: 0 0 10px 0;
}

<div class="thirds clearfix">

  <!-- one-third -->
  <div class="one-third mobile-collapse">
    <a href="thetrainer.html">
      <img src="http://i66.tinypic.com/vnfcro.jpg" width="400px" height="400px">
    </a>
    <h2>The Trainer</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="button1">
      <a href="thetrainer.html"><img src="http://i66.tinypic.com/33kakow.png"></a>
    </div>
  </div>
  <!--/one-third-->

  <!-- one-third -->
  <div class="one-third one-third-second mobile-collapse">
    <a href="lessons.html">
      <img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" width="400px" height="400px">
    </a>
    <h2>Lessons</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="button2">
      <a href="lessons.html"><img src="http://i66.tinypic.com/33kakow.png"></a>
    </div>
  </div>
  <!--/one-third-->

  <!-- one-third -->
  <div class="one-third one-third-last mobile-collapse">
    <a href="training.html">
      <img src="http://i68.tinypic.com/2rel7rd.jpg" height="400px" width="400px">
    </a>
    <h2>Training</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="button3">
      <a href="training.html"><img src="http://i66.tinypic.com/33kakow.png"></a>
    </div>
  </div>
  <!--/one-third-->

</div>
<!--/thirds-->

Answer 1

One option is defining custom width and height for image. For example: define css like this in your css file..

.ImageDefault{
    width:100px;
    height: 100px;
}

And in image use:

<img src="some path" class="ImageDefault"/>

Answer 2

Another way is to use the images as the background. Use div instead of img in your HTML and use background-image for the images...As you have multiple images, you have to write inline css for background-image

Setting width and height to the image will stretch your image...

Stack Snippet

.image-wrapper {
  height: 400px;
  width: 400px;
  background-size: cover;
  background-position: center center;
}

<div class="thirds clearfix">
  <div class="one-third mobile-collapse">
    <a href="thetrainer.html">
      <div class="image-wrapper" style="background-image:url(http://i66.tinypic.com/vnfcro.jpg)"></div>
    </a>
    <h2>The Trainer</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="button1">
      <a href="thetrainer.html"><img src="http://i66.tinypic.com/33kakow.png"></a>
    </div>
  </div>
  <div class="one-third one-third-second mobile-collapse">
    <a href="lessons.html">
      <div class="image-wrapper" style="background-image:url(http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg)"></div>
    </a>
    <h2>Lessons</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="button2">
      <a href="lessons.html"><img src="http://i66.tinypic.com/33kakow.png"></a>
    </div>
  </div>
  <div class="one-third one-third-last mobile-collapse">
    <a href="training.html">
      <div class="image-wrapper" style="background-image:url(http://i68.tinypic.com/2rel7rd.jpg)"></div>
    </a>
    <h2>Training</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="button3">
      <a href="training.html"><img src="http://i66.tinypic.com/33kakow.png"></a>
    </div>
  </div>
</div>

Answer 3

CSS only solution will require you to add put image as background image of that div with background-size: cover style.

So your anchor tag should have these styles:

background-image: url('link-to-image.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;

Just note that your anchor tag should have height and width to display image as its background.