Farklı boyuttaki resimleri belirli bir formata sığdır

Question

Farklı API'lardan görüntüler ayrışıyorum ve onu web sitesinde görüntülemek istiyorum. Ama önyükleme listede sığacak şekilde belirli boyutta görüntülemeden ile sorun var (~ 700x300px) Bazı zamanlar resimlerin dikey yerine yatay içindedir. Tüm 700x300 piksel alan görüntü ile doldurulmalı, ancak gerilmemelidir.

Yaklaşım # 1 Görüntüyü sunucuya yükleyin, yeniden boyutlandırın ve dönüştürün. Uzak bağlantılar yerine localserver'dan ana bilgisayar.

Yaklaşım # 2 Kullanım angularjs bazı sihirli (O alanda acemi olduğum)

Yaklaşım 3. Kullanım CSS/HTML5 bazı sihirli (bu da acemi olduğum) Şimdilik

ben bu

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

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

gibi bir şey var Aşağıdaki deyim akıcı yapmazsa

Answer 1

Üzgünüm, İngilizce, kötü,

Oldukça ne demek istediğini anlamadı anlıyorum ama bu sorununuzu çözebilir düşünüyorum edin:

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

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

Answer 2

Veya görüntüyü DIV'ye bir arka plan mage olarak ayarlayabilir ve ardından arka plan boyutunu kapsayacak şekilde ayarlayabilirsiniz.

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