Fit different sized images to specific format

Question

I'm parsing images from different APIs and I want to display it on website. But I have problem with displaying it in specific size to fit it in bootstrap list (~700x300px) Some times images are in portrait instead of landscape. Whole 700x300px space should be filled by image, but not stretched.

Approach #1 Download image to server, resize it and transform. Host from localserver instead of remote links.

Approach #2 Use some magic of AngularJS (I'm newbie on that area)

Approach #3 Use some magic of CSS/HTML5 (I'm also newbie in this)

For now i got something like this

<style>
    .list {
        width: 700px;
        height: 250px;
        overflow: hidden;
        position: relative;
    }

    div img {
        position: absolute;
    }
</style>

Answer 1

Sorry, my English is poor, if the following statement does not fluent, please understand

I did not quite understand what you mean, but I think this can solve your problem:

.list {
    width: 700px;
    height: 250px;
    overflow: hidden;
    position: relative;
}
div img {
    position: absolute;

    /*Add this code*/
    width: 100%;
}