將不同大小的圖像適合特定格式

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; }