केवल सीएसएस का उपयोग करके बाउंडिंग बॉक्स में फ़िट करने के लिए छवियों को अपस्केल करना:

प्रस्तुत चुनौती एक छवि को बाउंडिंग बॉक्स में फिट करने के लिए अपस्केल करना है, जबकि इसके पहलू अनुपात को संरक्षित करना। प्रदान किया गया सीएसएस कोड डाउनस्केलिंग को संभालता है, लेकिन अपस्केलिंग को नहीं। डिब्बा { पृष्ठभूमि-छवि: यूआरएल(...); बैकग्राउंड-रिपीट: नो-रिपीट; पृष्ठभूमि-आकार: शामिल; }

HTML संरचना:

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

संगतता:

केंद्रित:

छवि को बाउंडिंग बॉक्स के भीतर केंद्रित करने के लिए , निम्नलिखित भिन्नता का उपयोग किया जा सकता है:

.बाउंडिंग-बॉक्स { पृष्ठभूमि-छवि: यूआरएल(...); पृष्ठभूमि-आकार: शामिल; स्थिति: निरपेक्ष; पृष्ठभूमि-स्थिति: केंद्र; बैकग्राउंड-रिपीट: नो-रिपीट; ऊंचाई: 100%; चौड़ाई: 100%; }