ছবিকে সাথে সাথে সাজানো কিভাবে

CSS কিভাবে ছবিকে সাথে সাথে সাজাতে শিখুন

ছবিগুলোকে কাঁধে কাঁধে কীভাবে স্থানান্তরিত করা যায়

প্রথম পদক্ষেপ - HTML যোগ করুন

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন

কিভাবে CSS ব্যবহার করা যায় ফ্লোট সমষ্টি ছবিগুলো কাঁধে কাঁধে তৈরি করতে প্রয়োগ করা হয়

ফ্লোট উদাহরণ

/* তিনটি ছবি কনটেন্টার (চারটি ছবি কনটেন্টার 25% ব্যবহার করুন, দুইটি ছবি কনটেন্টার 50% ব্যবহার করুন, ইত্যাদি) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* ছবি কনটেন্টারের পরের ফ্লোটিং করে নিচ্ছে */
.row::after {
  content: "";
  clear: both;
  display: table;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

কিভাবে CSS ব্যবহার করা যায় flex সমষ্টি ছবিগুলো কাঁধে কাঁধে তৈরি করতে প্রয়োগ করা হয়

ফ্লেক্সবক্স উদাহরণ

.row {
  display: flex;
}
.column {
  flex: 33.33%;
  padding: 5px;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

মন্তব্য:ফ্লেক্সবক্স ইন্টারনেট এক্সপ্লোরার 10 এবং তার আগের সংস্করণগুলোকে সমর্থন করে না। তিনটি স্তম্ভ তৈরি করতে ফ্লোট বা ফ্লেক্স কোডটি কোনও কোনও পদ্ধতিতে ব্যবহার করা যেতে পারে। কিন্তু, আপনি আইই 10 এবং তার কম সংস্করণকে সমর্থন করতে হলে, আপনাকে ফ্লোট ব্যবহার করতে হবে。

তুলনা:ফ্লেক্সবক্স লোডাউট মডিউল সম্পর্কে আরও বিস্তারিত জানতে, আমাদের সিএসএস ফ্লেক্সবক্স শিক্ষাক্রম。

প্রতিক্রিয়তা যোগ করুন

বা, আপনি মিডিয়া কোয়াইয়ার যোগ করতে পারেন, যাতে ছবিগুলো নির্দিষ্ট প্রস্থতে উঁচুতে স্থানান্তরিত হয়, নয়তো কাঁধে কাঁধে

নিম্নলিখিত উদাহরণটিতে, 500px বা তার কম প্রস্থতে ছবিগুলোকে উঁচুতে স্থানান্তরিত করা হবে:

প্রতিক্রিয় উদাহরণ

/* প্রতিক্রিয় লোড - তিনটি স্তম্ভকে কাঁধে কাঁধে স্থানান্তরিত করুন */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

মিডিয়া কোয়াইয়ার সম্পর্কে আরও বিস্তারিত জানতে, আমাদের সিএসএস মিডিয়া কোয়াইয়ার শিক্ষাক্রম。

সংশ্লিষ্ট পৃষ্ঠা

শিক্ষাক্রম:সিএসএস ইমেজ

শিক্ষাক্রম:সিএসএস ফ্লোটিং

শিক্ষাক্রম:CSS 图片库