Crop images keeping aspect ratio

Question

I have a list of images with text wrapped around but images I receive come in different sizes (all larger than 150px). I need to crop them all to 150x100px but keep correct aspect ratio. Could anyone please suggest the best way of solving this problem? Thanks!

HTML:

<ul>        
    <div class="post" id="post">
    <div>
        <li>
        <img class="TextWrap" src="{{ picture }}">
        <a href="{{ link }}">{{ message }}</a><p>
        {{ time }}
        </li>   
    </div>
</ul> 

CSS:

.post {
    width: 500px;
    margin-top: 15px;
    float: left;
}

.post img {
    width: 150px;
    height: 100px;
    margin-bottom: 15px;
    margin-right: 20px;
}

.TextWrap {
    float: left;
}

Answer 1

As long as you do not want server side cropping, you can add following css:

.post img {
    object-fit: cover;
}

Please check more possible values for object-fit

Answer 2

As an alternative to Ray's answer, you can set the images as backgrounds and use:

background-size: cover;