এইচটিএমএল: কিভাবে সিএসএস কন্টেইনার ক্যোয়ারী দিয়ে একটি ইমেজের আকার পরিবর্তন করবেন

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

তারপরে আমরা এটিকে একটি চিত্রের মতো কাজ করতে যাচ্ছি কারণ এটি ডকুমেন্টের মধ্যে স্কুইশ, প্রসারিত এবং স্থানান্তরিত হয়। ঠিক আছে, আসুন এটি পরীক্ষা করে দেখি!

ঠিক আছে, তাই আমরা যে সাইটটি তৈরি করছি তার সাইডবারে এই ভ্যান বিজ্ঞাপনটি রয়েছে এবং এটি বর্তমানে একটি চিত্র।

এটি সম্পাদনা করা কঠিন করে তোলে; একজন ডিজাইনারকে এটি আপডেট করতে হবে এবং কিছু পরিবর্তন করার প্রয়োজন হলে আমাদের একটি নতুন চিত্র প্রদান করতে হবে।

এছাড়াও, সোর্স সেটের সাথে ব্যবহার করার জন্য আমাদের সম্ভবত একাধিক সংস্করণের প্রয়োজন হবে যাতে এটি উচ্চ-ঘনত্ব এবং কম-রেজোলিউশন উভয় প্রদর্শনে খাস্তা দেখায়।

সুতরাং, আমরা এটিকে এইচটিএমএলে রূপান্তর করার দায়িত্ব পেয়েছি; এটা আমরা কিভাবে করতে পারি?

ইমেজ এবং ভিউপোর্ট ইউনিট ব্যবহার করার কিছু খারাপ দিক

ঠিক আছে, আমরা সম্ভবত ভিউপোর্ট ইউনিট ব্যবহার করতে পারতাম, কিন্তু বিজ্ঞাপনটিকে বিভিন্ন স্থানে রাখলে আমাদের অতিরিক্ত কোড যোগ করতে হবে যেখানে এর মাত্রা ভিন্ন হবে কারণ সবকিছুই ভিউপোর্টের উপর ভিত্তি করে হবে এবং কন্টেইনারের মাত্রা নয়।

সুতরাং, আমরা এটিকে টানতে পারি, তবে এটি কিছুটা অগোছালো হতে পারে। পরিবর্তে, আমরা কন্টেইনার কোয়েরি এবং কন্টেইনার কোয়েরি ইউনিট ব্যবহার করতে পারি। কন্টেইনার ক্যোয়ারীগুলি মিডিয়া কোয়েরির মতই হয় কিন্তু সামগ্রিক ভিউপোর্টের পরিবর্তে পৃষ্ঠায় যে কোনো প্রদত্ত কন্টেইনারের মাত্রার উপর ভিত্তি করে।

CSS container-type প্রপার্টি দিয়ে একটি কন্টেইনার সেট আপ করা

ঠিক আছে, আসুন আমরা কি দিয়ে শুরু করছি তা পরীক্ষা করে দেখি।

সুতরাং, এটি এখানে বেশ ভাল দেখাচ্ছে কিন্তু, এটি প্রতিক্রিয়া হিসাবে এটি কীভাবে করে?

উহ, টেক্সট এবং সীমানা আকার পরিবর্তন করে না, তাই এটির কিছু ভালবাসা প্রয়োজন কারণ এটি দাঁড়িয়ে থাকা অবস্থায় এটি বেশ ভেঙে গেছে। এখন, একটি জিনিস আমরা ইতিমধ্যে এখানে করছি, আমরা একটি aspect-ratio ব্যবহার করছি যা কন্টেইনারকে একটি চিত্র হিসাবে প্রতিক্রিয়া জানাতে দেয়, এটি সবই ভাল।

 figure { aspect-ratio: 1 / 1.5; }

বিষয়বস্তুকে সঠিকভাবে সাড়া দেওয়ার জন্য আমাদের কেবলমাত্র সমস্ত মাত্রা পরিবর্তন করতে হবে। এখানে প্রথম ধাপ হল আমাদের মাত্রা নিরীক্ষণ করার জন্য একটি ধারক প্রদান করা। এটি আমাদের চিত্রের উপাদান হবে।

এখানে কন্টেইনার ক্যোয়ারী ব্যবহার করার জন্য, আমাদেরকে সংজ্ঞায়িত করতে হবে যা কনটেইনমেন্ট প্রসঙ্গ হিসাবে পরিচিত। আমরা container-type সম্পত্তির সাথে এটি করতে পারি। এই উদাহরণের জন্য, আমরা ইনলাইন আকারের একটি মান ব্যবহার করতে পারি।

 figure { ... container-type: inline-size; }

এটি একটি ধারক সেট আপ করতে যাচ্ছে যা তার ইনলাইন আকারের উপর ভিত্তি করে জিনিসগুলিকে আকার দেবে যা এই ক্ষেত্রে, চিত্রের প্রস্থ হবে। ঠিক আছে, তাই এখন আমাদের কাছে নিরীক্ষণ করার জন্য একটি ধারক রয়েছে, তাই আমরা এখন কন্টেইনার ক্যোয়ারী ইউনিটগুলি ব্যবহার করতে মুক্ত। এবং, থেকে বেছে নিতে অনেক আছে. আমরা এই ইউনিট মানগুলির যেকোনো একটি ব্যবহার করতে পারি:

• cqw
• cqh
• cqi
• cqb
• cqmin
• cqmax

এখানে, আমরা cqi ব্যবহার করতে যাচ্ছি যা, আমি বিশ্বাস করি, কনটেইনার ক্যোয়ারী ইনলাইনের জন্য দাঁড়িয়েছে। একটি cqi ইউনিট পাত্রের প্রস্থের এক শতাংশের সমান। ঠিক আছে, এটা আমাদের প্রয়োজন; এখান থেকে, আমরা প্রয়োজন অনুযায়ী ইউনিট সেট করছি।

এখানে, আমাদের কাছে কয়েকটি কাস্টম বৈশিষ্ট্য রয়েছে যা এই বিজ্ঞাপনের বিভিন্ন উপাদানে ব্যবহৃত হয়।

 figure { ... --frameInset: 0.5rem; --frameStyle: solid 0.25rem currentColor; }

ধারকটির বাইরের প্রান্ত থেকে এই ফ্রেমটি যে পরিমাণ ইনসেট করা হয়েছে তা দিয়ে শুরু করা যাক। এটাকে তিন cqi করা যাক।

 figure { ... --frameInset: 3cqi; }

এর পরে, এখানে সীমানার পুরুত্ব সেট করা যাক। এই ক্ষেত্রে, আমি max ফাংশন ব্যবহার করতে যাচ্ছি যাতে সীমানাগুলিকে এক পিক্সেলের নীচে সঙ্কুচিত হতে বাধা দেয়, তবে আমি চাই যে সেগুলি গতিশীল হোক যতক্ষণ না তারা সেই এক-পিক্সেল মানের থেকে বড় হয়।

সুতরাং, প্রথম মানটি একটি পিক্সেল, তারপর দ্বিতীয়টি গতিশীল মান। চলুন এটা এক cqi করা যাক.

 figure { ... --frameStyle: solid max(1px, 1cqi) currentColor; }

এখন, strong উপাদানটির জন্য, যা প্রধান শিরোনাম, "ভ্যানস" পাঠ্য, আসুন এটিকে পঁচিশ cqi করা যাক। এবং, শিরোনামের নীচে স্থানের জন্য, আসুন এটিকে তিন cqi করি।

 strong { font-size: 25cqi; padding-bottom: 3cqi; }

এখন, "অফ দ্য ওয়াল" সাবটাইটেলে যাওয়া যাক। এটি প্রধান শিরোনামের প্রায় অর্ধেক আকার হওয়া উচিত, তাই আসুন বারো cqi চেষ্টা করি। এবং, টেক্সটের উপরের স্থানের জন্য, আসুন আবার তিন cqi দিয়ে যাই।

 em { font-size: 12cqi; padding-top: 3cqi; }

ঠিক আছে, শেষ টুকরোটির জন্য, "Since 1966" লেবেল, আসুন ছয় cqi এর ফন্ট সাইজ দিয়ে যাই। এবং, উপরের এবং নীচের স্থানের জন্য, আমরা padding-block জন্য লজিক্যাল প্রপার্টি ব্যবহার করছি যা দুটি মান পর্যন্ত নেয়। প্রথম মানটি পাঠ্যের উপরের মান এবং দ্বিতীয় মানটি নীচের স্থানের জন্য।

সুতরাং, আসুন উপরে দুটি cqi নিয়ে যাই। এবং, আমাদের গণনাতে, আমরা --frameInset কে রেখে দেব, কিন্তু আমরা অতিরিক্ত স্পেস পাঁচ cqi দিয়ে যাব।

 time { font-size: 6cqi; padding-block: 2cqi calc(5cqi + var(--frameInset)); }

ঠিক আছে শান্ত, এই ভাল দেখায়.

এটা কিভাবে প্রতিক্রিয়া দেখা যাক. আমরা এটি চেপে, সবকিছু সঠিকভাবে আমরা চেয়েছিলাম অভিন্নভাবে প্রতিক্রিয়া. এটি দেখতে অনেকটা ইমেজের মতো।

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

এই কিভাবে শান্ত? শৈলীর একটি সেট, এবং এটি সব সময় কাজ করে। আমরা এটি সামনে এবং পিছনে স্কেল হিসাবে, এটা মহান দেখায়.

এখন, এর চেয়েও ভালো বিষয় হল যে আমরা আমাদের বিজ্ঞাপন মার্ক-আপ নিতে পারি, এটিকে এখানে বা মূল কলাম অঞ্চলে নিয়ে যেতে পারি এবং সবকিছু ঠিক তেমনই কাজ করতে থাকে যদি এটি একটি চিত্র হত।

 <header><h1>A Brief History of Vans</h1></header> <div class="content"> <main> <figure> <svg viewBox="0 0 256 256"> <path d="M90.4,67.9C88,69,87.1,70.6,83,80c-4.4,10.2-4.8,12.3-3.1,15"/> <path d="M97.4,95.2c-0.6,0.6-1.2,1.7-1.2,2.3s0"/> </svg> <figcaption> <strong>Vans</strong> <em>Off the Wall</em> <time>Since 1966</time> </figcaption> </figure> ... </main> </div> 

এই ঠিক তাই সুন্দর এবং তাই শান্ত. মনে রাখবেন, এই সমস্তটি বন্ধ করার জন্য শৈলীর একটি মাত্র সেট রয়েছে। এবং, শূন্য মিডিয়া প্রশ্ন জড়িত ছিল. সামগ্রিকভাবে কন্টেইনার ক্যোয়ারী করার জন্য আরও অনেক কিছু আছে, তাই ভবিষ্যত পোস্টগুলির জন্য সন্ধান করুন যেখানে আমি বিভিন্ন দিক কভার করব।

এটি কর্মে দেখতে চান?

নীচের কোডপেন উদাহরণে এই কৌশলগুলির ডেমো কোড এবং উদাহরণগুলি দেখুন। আপনার যদি কোন প্রশ্ন বা চিন্তা থাকে, একটি মন্তব্য করতে দ্বিধা করবেন না.