প্রতিক্রিয়া সহ চিত্রগুলির আকার পরিবর্তন করুন

ভূমিকা

একটি ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশনে ভিজ্যুয়াল থাকা সর্বদা একটি ভাল ধারণা কারণ তারা একজন ব্যবহারকারীকে জড়িত করতে সহায়তা করে, কিন্তু যখন এই চিত্রগুলি এত বড় হয় যে ব্যবহারকারীকে পুরো পৃষ্ঠাটি বিকৃত করে স্ক্রোল করতে হয়, তখন এটি বিপরীত প্রভাব অর্জন করে।

এই প্রবন্ধে, আমরা শিখব কিভাবে বিভিন্ন সম্ভাব্য পন্থা ব্যবহার করে প্রতিক্রিয়া দিয়ে চিত্রের আকার পরিবর্তন করা যায়।

রিঅ্যাক্টে ইমেজ রিসাইজ করা প্রথাগত এইচটিএমএল-এর ইমেজ রিসাইজ করার মতোই কারণ আমরা এর মাধ্যমে 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 এবং নির্বাচক হিসাবে এটি ব্যবহার করুন।

ইনলাইন শৈলীর সাহায্যে কীভাবে একটি চিত্রের আকার পরিবর্তন করবেন

আমরা পূর্ববর্তী উদাহরণে বাহ্যিক স্টাইলিং ব্যবহার করেছি, কিন্তু প্রথাগত এইচটিএমএলের মতই, আমরা ব্যবহার করতে পারি style CSS স্টাইলিং যোগ করার জন্য বৈশিষ্ট্য। দ্য style বৈশিষ্ট্য মান একটি জাভাস্ক্রিপ্ট বস্তু হতে হবে কী-মান জোড়া সহ:

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 ট্যাগ এবং এটি প্রতিক্রিয়ার সাথেও কাজ করে:

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, এবং অন্যান্য CSS বৈশিষ্ট্যগুলি আমাদের চিত্রগুলির আকার পরিবর্তন করতে, তারা সেগুলিকে বিকৃত করে, তাদের সঙ্কুচিত বা প্রসারিত করে।

এটি অন্তর্ভুক্ত করা সর্বদা একটি ভাল ধারণা object-fit প্রপার্টি, যা নির্দিষ্ট করে যে কিভাবে একটি ছবিকে তার কন্টেইনারে ফিট করার জন্য পুনরায় আকার দেওয়া উচিত। এই সম্পত্তি যেমন মান বিভিন্ন গ্রহণ করতে পারেন contain, cover, fill, none এবং scale-down.

অন্যান্য CSS বৈশিষ্ট্য, যেমন max-width, min-width, max-height, এবং min-height, সর্বাধিক এবং সর্বনিম্ন মান নির্ধারণ করতে পারে একটি চিত্র আঘাত করতে পারে, বিকৃতি সীমিত করে।

উপসংহার

এই নিবন্ধে, আমরা আমাদের কাছে উপলব্ধ বিভিন্ন বিকল্পগুলি দেখে প্রতিক্রিয়াতে চিত্রগুলির আকার পরিবর্তন করতে শিখেছি।

যাইহোক, এই চিত্রগুলিতে স্থির বৈশিষ্ট্যগুলি সেট করার পরিবর্তে CSS শৈলীগুলি ব্যবহার করা বাঞ্ছনীয় যদি না আপনি এই মানগুলি গতিশীলভাবে পেতে চান তখন একেবারে প্রয়োজনীয় না হয়, এই ক্ষেত্রে ইনলাইন স্টাইলিংও ব্যবহার করা যেতে পারে।