হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজে (এইচটিএমএল) কোনও পৃষ্ঠায় একটি চিত্র প্রদর্শন করতে একটি বিশেষ কমান্ড "ট্যাগ" ব্যবহার করা হয়। এই ট্যাগটি img হিসাবে উল্লেখ করা হয় এবং ভেরিয়েবলগুলির একটি সেট রয়েছে - "গুণাবলী"। গুণাবলীর সাহায্যে, আপনি একটি হাইপারটেক্সট পৃষ্ঠাতে এর চিত্রগুলির মাত্রাগুলি সহ সমস্ত চিত্র নির্ধারণ করতে পারেন। তবে সমস্যা সমাধানের একমাত্র উপায় এটি নয় - আপনি ক্যাসকেডিং স্টাইল শীট (সিএসএস) ব্যবহার করে চিত্রের আকারও হ্রাস করতে পারবেন।
নির্দেশনা
ধাপ 1
পছন্দসই চিত্রটি প্রদর্শনের জন্য দায়ী ট্যাগটিতে উচ্চতা এবং প্রস্থের বৈশিষ্ট্যগুলি রাখুন। প্রথমটিকে চিত্রের উল্লম্ব আকারে এবং দ্বিতীয়টি অনুভূমিকভাবে সেট করুন। উভয় সংখ্যা পিক্সেলে সেট করুন, তবে এখানে ইউনিট - পিক্স - নির্দেশ করার দরকার নেই। এই বৈশিষ্ট্যগুলির জন্য প্রয়োজনীয় মানগুলি গণনা করার সময়, চিত্র হ্রাসের অনুপাতের প্রতি মনোযোগ দিন, অন্যথায় এটি একটি বিকৃত আকারে প্রদর্শিত হবে। উদাহরণস্বরূপ, সোমারপিক.জেপিজি নামে একটি ফাইল থেকে একটি পৃষ্ঠায় একটি অর্ধেক ছবি রাখতে, যার প্রাথমিক মাত্রা 500 বাই 300 পিক্সেল, ট্যাগটি নিম্নলিখিত কমান্ডের সাহায্যে করা যেতে পারে:
ধাপ ২
আপনি মূল চিত্রের মাত্রাগুলির আনুপাতিক হ্রাস শতাংশে সেট করতে পারেন। এটি করতে, প্রস্থ নির্দিষ্ট না করে কেবলমাত্র উচ্চতার বৈশিষ্ট্যটি ব্যবহার করুন এবং আকার নির্ধারণের সংখ্যা নির্দিষ্ট করার পরে শতাংশ সাইন যুক্ত করুন। উদাহরণস্বরূপ, আপনি এই ফর্মটিতে লিখিত ট্যাগ সহ আগের পদক্ষেপ থেকে উদাহরণের মতো একই প্রভাব অর্জন করতে পারেন:
ধাপ 3
আপনি যদি শৈলীর বিবরণ ব্যবহার করে চিত্রের আকার নির্দিষ্ট করতে চান তবে একই ট্যাগের নাম - img - এবং বৈশিষ্ট্যগুলি - প্রস্থ এবং উচ্চতা ব্যবহার করুন। এই ক্ষেত্রে, পরিমাপের একক - px, pt বা% - সর্বদা নির্দিষ্ট করা আবশ্যক। পৃষ্ঠায় একেবারে সমস্ত চিত্রের আকার অর্ধেক সেট করতে, শৈলীর বিবরণ ব্লকে নিম্নলিখিত এন্ট্রিটি রাখুন: img {উচ্চতা: 50%; you আপনার যদি কেবল একটি চিত্রের আকার হ্রাস করতে হয় তবে একটি অতিরিক্ত আইডি বৈশিষ্ট্য যুক্ত করুন এটির ট্যাগটিতে এই পৃষ্ঠার মানটির চিত্রগুলির জন্য একটি অনন্য নির্ধারণ করুন - উদাহরণস্বরূপ, পিকন: স্টাইল রেকর্ডে একই মান যুক্ত করুন, এটি ট্যাগের নাম থেকে "হ্যাশ" # দিয়ে পৃথক করে। এক্ষেত্রে সম্পূর্ণ শৈলীর বিবরণ এর মতো দেখাতে পারে: img # ওয়ানপিক {উচ্চতা: 50%;}
