विशिष्ट प्रारूप

Question

पर विभिन्न आकार की छवियों को फ़िट करें मैं विभिन्न एपीआई से छवियों को पार्स कर रहा हूं और मैं इसे वेबसाइट पर प्रदर्शित करना चाहता हूं। लेकिन मुझे बूटस्ट्रैप सूची (~ 700x300px) में फिट करने के लिए इसे विशिष्ट आकार में प्रदर्शित करने में समस्या है कुछ बार छवियां परिदृश्य के बजाय चित्र में हैं। पूरे 700x300px स्थान छवि द्वारा भरा जाना चाहिए, लेकिन विस्तारित नहीं किया जाना चाहिए।

दृष्टिकोण # 1 सर्वर पर छवि डाउनलोड करें, इसका आकार बदलें और बदलें। दूरस्थ लिंक के बजाय localserver से होस्ट करें।

कार्य # 2 उपयोग AngularJS के कुछ जादू (मैं उस क्षेत्र पर नौसिखिया हूँ)

कार्य # 3 उपयोग सीएसएस/एचटीएमएल 5 में से कुछ जादू (मैं भी इस में नौसिखिया हूँ)

अभी के लिए मैं इस

<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

या आप छवि को पृष्ठभूमि-mage के रूप में DIV पर सेट कर सकते हैं, फिर कवर करने के लिए पृष्ठभूमि-आकार सेट करें।

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