पहलू अनुपात बनाए रखते हुए छवि का आकार बदलें

छवियों के साथ काम करते समय, छवियों का आकार विशिष्ट आयामों में बदलना अक्सर आवश्यक होता है। हालाँकि, पहलू अनुपात को संरक्षित करने से यह सुनिश्चित होता है कि छवियां विकृत या फैली हुई दिखाई नहीं देती हैं। छवि, लेकिन पहलू अनुपात बनाए नहीं रखा गया था:

img { अधिकतम-चौड़ाई: 500px; }

img {
  max-width: 500px;
}

प्रदर्शन: ब्लॉक;: सुनिश्चित करता है कि छवि पृष्ठ सामग्री के भीतर प्रवाहित हो सकती है।

• चौड़ाई: ऑटो;: छवि को अधिकतम-के भीतर उपलब्ध स्थान को स्वचालित रूप से भरने की अनुमति देता है। चौड़ाई और अधिकतम ऊंचाई की बाधाएं।
• ऊंचाई: ऑटो;: छवि के अंतर्निहित पहलू के आधार पर ऊंचाई को स्वचालित रूप से समायोजित करता है अनुपात।
• परिणाम:
• छवि पर इन सीएसएस नियमों को लागू करना:

यह छवि मूल रूप से 400x400 पिक्सेल की है, लेकिन सीएसएस द्वारा आकार बदला जाना चाहिए:

परिणामस्वरूप एक ऐसी छवि बनती है जिसका आकार उसके मूल पहलू अनुपात को बनाए रखते हुए निर्दिष्ट अधिकतम आयामों के भीतर बदल दिया जाता है।