Подгонка изображений различного размера в определенном формате

Question

Я разбираю изображения из разных API и хочу отображать их на веб-сайте. Но у меня проблема с отображением его в определенном размере, чтобы он соответствовал ему в списке начальной загрузки (~ 700x300 пикселей). Несколько раз изображения находятся в портретном, а не в ландшафтном режиме. Все пространство размером 700x300 пикселей должно быть заполнено изображением, но не растянуто.

Подход № 1 Загрузить изображение на сервер, изменить его размер и преобразовать. Хост из локального сервера вместо удаленных ссылок.

Подход № 2 Использование некоторых магии AngularJS (я новичок в этой области)

Подход № 3 Использование некоторых магии CSS/HTML5 (я тоже новичок в этом)

На данный момент я получил что-то вроде этого

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

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

Answer 1

К сожалению, мой английский оставляет желать лучшего, если следующее утверждение не свободно, пожалуйста, поймите

Я не совсем понимаю, что вы имеете в виду, но я думаю, что это может решить вашу проблему:

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

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

Answer 2

Или вы можете установить изображение в качестве фона-мага в DIV, а затем установить размер фона для покрытия.

div { background: url(images/from/api.jpg) 50% 50%/cover no-repeat; }