একই সময়ে অনুভূমিকভাবে এবং উল্লম্বভাবে পিতামাতার ভিতরে ইনলাইন উপাদানগুলি সারিবদ্ধ করার একটি কৌশল এখানে রয়েছে :
উল্লম্ব প্রান্তিককরণ
1) এই পদ্ধতির মধ্যে আমরা পিতামাতারinline-block প্রথম (বা শেষ) সন্তানের হিসাবে একটি (সিউডো) উপাদান তৈরি করি এবং তার পিতামাতার সমস্ত উচ্চতা নিতে তার সম্পত্তি সেট করি ।height100%
২) এছাড়াও, যোগ করার vertical-align: middleফলে লাইন স্পেসের মাঝখানে ইনলাইন (-ব্লক) উপাদান থাকে keeps সুতরাং, আমরা সেই প্রথম সিএসএস ঘোষণাকে প্রথম সন্তানের সাথে যুক্ত করব এবং আমাদের উপাদান ( চিত্র ) উভয়ই।
3) অবশেষে, ইনলাইন (-ব্লক) উপাদানগুলির মধ্যে সাদা স্থানের অক্ষরটি সরাতে আমরা পিতামাতার ফন্টের আকারটি শূন্য দ্বারা সেট করতে পারি font-size: 0;।
দ্রষ্টব্য: আমি নীচে নিকোলাস গ্যালাগারের চিত্র প্রতিস্থাপন কৌশলটি ব্যবহার করেছি ।
লাভ কি কি?
- ধারক ( পিতামাতার ) গতিশীল মাত্রা থাকতে পারে।
চিত্রের উপাদানগুলির মাত্রা স্পষ্টভাবে নির্দিষ্ট করার দরকার নেই।
কোনও <div>উপাদানকে উল্লম্বভাবে সারিবদ্ধ করার জন্য আমরা সহজেই এই পদ্ধতির ব্যবহার করতে পারি ; যার একটি গতিশীল সামগ্রী থাকতে পারে (উচ্চতা এবং / অথবা প্রস্থ)। কিন্তু নোট আছে আপনি পুনরায়-সেট করতে font-sizeসম্পত্তির divভিতরে টেক্সট প্রদর্শন করে। অনলাইন ডেমো ।
<div class="container">
<div id="element"> ... </div>
</div>
.container {
height: 300px;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.container:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
#element {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 Arial sans-serif; /* <-- reset the font property */
}
আউটপুট
প্রতিক্রিয়াশীল ধারক
এই বিভাগটি প্রশ্নের জবাব দিতে যাচ্ছে না কারণ ওপি ইতিমধ্যে জবাবদিহি ধারক তৈরি করতে জানে knows যাইহোক, আমি এটি কীভাবে কাজ করে তা ব্যাখ্যা করব।
তৈরী করার উদ্দেশ্যে উচ্চতা তার সঙ্গে একটি কন্টেইনারে উপাদান পরিবর্তনের প্রস্থ (অনুপাত সম্মান), আমরা শীর্ষ / নীচে জন্য শতকরা মান ব্যবহার করতে পারে paddingসম্পত্তি।
শীর্ষ / নীচের প্যাডিং বা মার্জিনের একটি শতাংশের মানটি ব্লক যুক্ত প্রস্থের সাথে তুলনামূলক।
এই ক্ষেত্রে:
.responsive-container {
width: 60%;
padding-top: 60%; /* 1:1 Height is the same as the width */
padding-top: 100%; /* width:height = 60:100 or 3:5 */
padding-top: 45%; /* = 60% * 3/4 , width:height = 4:3 */
padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9 */
}
এখানে অনলাইন ডেমো রয়েছে । নীচে থেকে লাইনগুলি মন্তব্য করুন এবং প্রভাবটি দেখতে প্যানেলটির আকার পরিবর্তন করুন।
এছাড়াও, আমরা একই ফল অর্জনের জন্য paddingসম্পত্তিটি একটি ডামি শিশু বা :before/ :afterসিউডো-এলিমেন্টে প্রয়োগ করতে পারি । তবে মনে রাখবেন যে এক্ষেত্রে শতাংশের মানটি paddingতার প্রস্থের সাথে .responsive-containerসামঞ্জস্যপূর্ণ।
<div class="responsive-container">
<div class="dummy"></div>
</div>
.responsive-container { width: 60%; }
.responsive-container .dummy {
padding-top: 100%; /* 1:1 square */
padding-top: 75%; /* w:h = 4:3 */
padding-top: 56.25%; /* w:h = 16:9 */
}
ডেমো # 1 ।
ডেমো # 2 ( :afterসিউডো-উপাদান ব্যবহার করে )
সামগ্রী যুক্ত করা হচ্ছে
ব্যবহার padding-topসম্পত্তি বিপুল স্থান ঘটায় উপরে বা কন্টেন্টের নীচে, ভিতরে ধারক ।
অর্ডার এটি ঠিক করার জন্য, আমরা একটি লেফাফা উপাদান দিয়ে সামগ্রীর মোড়ানো ব্যবহার করে দস্তাবেজ স্বাভাবিক প্রবাহ থেকে যে উপাদান অপসারণ আছে পরম অবস্থান , এবং পরিশেষে মোড়কের প্রসারিত (Bu ব্যবহার top, right, bottomএবং leftবৈশিষ্ট্য) তার পিতা বা মাতা সমগ্র স্থান পূরণ করার জন্য, ধারক ।
এখানে আমরা যাচ্ছি:
.responsive-container {
width: 60%;
position: relative;
}
.responsive-container .wrapper {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
এখানে অনলাইন ডেমো রয়েছে ।
সব একসাথে করা
<div class="responsive-container">
<div class="dummy"></div>
<div class="img-container">
<img src="http://placehold.it/150x150" alt="">
</div>
</div>
.img-container {
text-align:center; /* Align center inline elements */
font: 0/0 a; /* Hide the characters like spaces */
}
.img-container:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.img-container img {
vertical-align: middle;
display: inline-block;
}
এখানে ওয়ার্কিং ডেমো রয়েছে ।
স্পষ্টতই, আপনি ব্রাউজারের সামঞ্জস্যের::before জন্য সিউডো-উপাদান ব্যবহার এড়াতে এবং এর প্রথম শিশু হিসাবে একটি উপাদান তৈরি করতে পারেন :.img-container
<div class="img-container">
<div class="centerer"></div>
<img src="http://placehold.it/150x150" alt="">
</div>
.img-container .centerer {
display: inline-block;
vertical-align: middle;
height: 100%;
}
আপডেট করা ডেমো ।
max-*বৈশিষ্ট্য ব্যবহার করে
ছবিটির বাক্সের ভিতরে কম প্রস্থে রাখার জন্য, আপনি চিত্রটিতে সেট max-heightএবং max-widthসম্পত্তি রাখতে পারেন:
.img-container img {
vertical-align: middle;
display: inline-block;
max-height: 100%; /* <-- Set maximum height to 100% of its parent */
max-width: 100%; /* <-- Set maximum width to 100% of its parent */
}
এখানে আপডেটেড ডেমো রয়েছে ।