प्रतिक्रिया के साथ छवियों का आकार बदलना

परिचय

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

इस लेख में, हम सीखेंगे कि कई संभावित तरीकों का उपयोग करके रिएक्ट के साथ छवियों का आकार कैसे बदला जाए।

रिएक्ट में छवियों का आकार बदलना पारंपरिक HTML में छवियों का आकार बदलने के समान है क्योंकि हम CSS शैलियों (या तो आंतरिक, इनलाइन, या बाहरी स्टाइल) का उपयोग करते हैं className या style विशेषता। हम का भी उपयोग कर सकते हैं height और width पर विशेषताएँ img सीधे टैग करें।

नोट: प्रतिक्रिया में, हम उपयोग नहीं करते class जैसे हम HTML में करते हैं, इसके बजाय, हम उपयोग करते हैं className, जो समान कार्य करता है कक्षा और स्ट्रिंग मान स्वीकार करता है।

कोड आम तौर पर कुछ इस तरह दिखेगा:

<!-- index.css -->
img {
   width: 500px;
   height: 600px;
}

और हमारी छवि इस तरह दिखेगी:

<!-- App.js -->
import Logo from './images/react-logo.png';
import './index.css';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

नोट: हमने इस्तेमाल किया img चयनकर्ता के रूप में, हम इसे देने का निर्णय ले सकते हैं className और चयनकर्ता के रूप में इसका उपयोग करें।

इनलाइन शैलियों के साथ एक छवि का आकार कैसे बदलें

हमने पिछले उदाहरण में बाहरी स्टाइलिंग का उपयोग किया था, लेकिन पारंपरिक HTML की तरह ही, हम इसका उपयोग कर सकते हैं style CSS स्टाइल जोड़ने के लिए विशेषता। style विशेषता मान एक JavaScript ऑब्जेक्ट होना चाहिए जिसमें कुंजी-मान युग्म हों:

import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
         <img style={{ width: 500, height: 600 }} src={Logo} alt="React Logo" />
      </div>
   );
};

डिफ़ॉल्ट रूप से, मूल इकाई पिक्सेल में होती है, लेकिन मान लीजिए कि हम अन्य इकाइयों का उपयोग करना चाहते हैं जैसे rem, %, vh, आदि। हम शैलियों के प्रमुख मान के लिए स्ट्रिंग का उपयोग करेंगे:

import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
         <img style={{ width: "500%", height: "600%" }} src={Logo} alt="React Logo" />
      </div>
   );
};

अगर हमारे पास ऐसी कई छवियां हैं जिन्हें समान स्टाइल की आवश्यकता है और बाहरी स्टाइल का उपयोग नहीं करना चाहते हैं, तो हम इन स्टाइल ऑब्जेक्ट्स को पकड़ने के लिए ऑब्जेक्ट बना सकते हैं और फिर ऑब्जेक्ट को जोड़ सकते हैं styles विशेषता:

import Logo from './images/react-logo.png';

const App = () => {
   const myImageStyle = { width: '500px', height: '600px' };

   return (
      <div>
         <img style={myImageStyle} src={Logo} alt="" />
      </div>
   );
};

के साथ एक छवि का आकार कैसे बदलें चौडाई तथा ऊंचाई गुण

पारंपरिक HTML में, छवियों का आकार बदलने का एक तरीका इसका उपयोग करना है height और width के साथ संपत्ति img टैग और यह भी प्रतिक्रिया के साथ काम करता है:

import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
          <img src={Logo} width="500" height="600" alt="" />
          
          <img src={Logo} width={500} height={600} alt="" />
      </div>
   );
};

इस पद्धति का मुख्य दोष यह है कि ऊंचाई और चौड़ाई के साथ झुकाव छवियों को विकृत कर देता है, जिससे वे सिकुड़ जाते हैं, खिंचाव करते हैं या अन्यथा अपना अनुपात खो देते हैं। इसका उपयोग करके तय किया जा सकता है object-fit: cover;.

हमारी छवियों को स्टाइल करना

जब हम उपयोग करते हैं height, width, max-height, और अन्य सीएसएस गुण हमारी छवियों का आकार बदलने के लिए, वे उन्हें विकृत करते हैं, जिससे वे सिकुड़ते या खिंचते हैं।

इसे शामिल करना हमेशा एक अच्छा विचार है object-fit संपत्ति, जो निर्दिष्ट करती है कि एक छवि को उसके कंटेनर में फिट करने के लिए कैसे आकार बदला जाना चाहिए। यह संपत्ति कई तरह के मूल्यों को स्वीकार कर सकती है जैसे कि contain, cover, fill, none और scale-down.

अन्य CSS गुण, जैसे max-width, min-width, max-height, तथा min-height, अधिकतम और न्यूनतम मानों को परिभाषित कर सकता है जो एक छवि हिट कर सकती है, विरूपण को सीमित कर सकती है।

निष्कर्ष

इस लेख में, हमने सीखा कि हमारे पास उपलब्ध विभिन्न विकल्पों को देखकर रिएक्ट में छवियों का आकार कैसे बदला जाए।

हालांकि, इन छवियों के लिए निश्चित विशेषताओं को सेट करने के बजाय सीएसएस शैलियों का उपयोग करना बेहतर होता है जब तक कि आप इन मूल्यों को गतिशील रूप से प्राप्त करना चाहते हैं, इस मामले में इनलाइन स्टाइल का भी उपयोग किया जा सकता है।