رد عمل کے ساتھ تصاویر کا سائز تبدیل کرنا

تعارف

کسی ویب سائٹ یا ویب ایپلیکیشن پر ویژول رکھنا ہمیشہ اچھا خیال ہوتا ہے کیونکہ وہ صارف کو مشغول کرنے میں مدد کرتے ہیں، لیکن جب یہ تصاویر اتنی بڑی ہوں کہ صارف کو پورے صفحے کو مسخ کرکے اسکرول کرنا پڑتا ہے، تو اس کا الٹا اثر ہوتا ہے۔

اس آرٹیکل میں، ہم سیکھیں گے کہ کئی ممکنہ طریقوں کو استعمال کرتے ہوئے React کے ساتھ تصاویر کا سائز تبدیل کرنے کا طریقہ۔

React میں تصاویر کا سائز تبدیل کرنا روایتی 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 سلیکٹر کے طور پر، ہم اسے a دینے کا فیصلہ کر سکتے ہیں۔ 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>
   );
};

کے ساتھ تصویر کا سائز تبدیل کرنے کا طریقہ چوڑائی اور اونچائی خصوصیات

روایتی ایچ ٹی ایم ایل میں، تصاویر کا سائز تبدیل کرنے کا ایک طریقہ استعمال کرنا ہے۔ height اور width کے ساتھ جائیداد img tag اور یہ React کے ساتھ بھی کام کرتا ہے:

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.

دیگر سی ایس ایس خصوصیات، جیسے max-width, min-width, max-height، اور min-height, زیادہ سے زیادہ اور کم سے کم اقدار کی وضاحت کر سکتا ہے جو ایک تصویر کو نشانہ بنا سکتی ہے، مسخ کو محدود کرتی ہے۔

نتیجہ

اس مضمون میں، ہم نے ہمارے لیے دستیاب مختلف اختیارات کو دیکھ کر React میں تصاویر کا سائز تبدیل کرنے کا طریقہ سیکھا۔

تاہم، ان امیجز کے لیے فکسڈ انتسابات سیٹ کرنے کے بجائے CSS اسٹائلز کا استعمال کرنا افضل ہے جب تک کہ بالکل ضروری نہ ہو جب آپ ان اقدار کو متحرک طور پر حاصل کرنا چاہتے ہیں، ایسی صورت میں ان لائن اسٹائلنگ بھی استعمال کی جا سکتی ہے۔