将不同大小的图像适合特定格式

Question

我正在解析来自不同API的图像，并且希望在网站上显示它。但我有问题以特定的大小显示它以适应引导列表（〜700x300px）有时候图像是纵向而不是横向。整个700x300px的空间应该用图像填充，但不能拉伸。

方法＃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; }