सीएसएस के साथ विशेष रूप से स्वयं के प्रतिशत के अनुसार एक छवि का आकार बदलना

वेब डिजाइनिंग के दायरे में, छवियों को विशिष्ट आयामों में आकार देने की आवश्यकता है बार-बार उठता है. एक परिदृश्य में किसी छवि के आकार को उसके कंटेनर तत्व के आकार में बदलाव किए बिना, उसके मूल आकार के एक प्रतिशत तक कम करना शामिल है। जबकि जावास्क्रिप्ट या सर्वर-साइड स्क्रिप्टिंग समाधान प्रदान करती है, यह लेख संभावित CSS-केवल विकल्पों की खोज करता है।

क्या CSS प्रतिशत का उपयोग करके किसी छवि का आकार बदलना संभव है?

वर्तमान में , कोई प्रत्यक्ष सीएसएस संपत्ति नहीं है जो किसी छवि को उसके आकार के आधार पर आकार देने की अनुमति देती है। हालाँकि, दो सरल विधियाँ हैं जो इस प्रभाव को प्राप्त कर सकती हैं:

विधि 1: परिवर्तन के साथ दृश्य का आकार बदलना

यह विधि किसी छवि को प्रभावित किए बिना उसके आकार को कम कर देती है वास्तविक आयाम. तकनीक छवि को एक निर्दिष्ट प्रतिशत तक छोटा करने के लिए 'ट्रांसफॉर्म: स्केल ()' संपत्ति का उपयोग करती है। छवि अपने मूल आयामों के भीतर केंद्रित रहती है।

उदाहरण:

img {
  transform: scale(0.5);
}