عمل نکردن ویژگی فیت کانتنت

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

باسلام ویژگی فیت کانتنت برای من کار نمیکند قبلا هم پرسیدم گفتید پروژه رو بفرستم

خدمت شما

<div class="container mt-5">
  <div class="row">
    <div class="col-sm-12 col-md-4">
      <img src="img/category/negative-space-space-stars-wallpaper-01.jpg" alt="offer for today" class="img-fluid">
          div>
          <div class="col-sm-12 col-md-4">
            <img src="img/category/road.jpg" alt="offer for today" class="img-fluid">
                div>
          <div class="col-sm-12 col-md-4">
            <img src="img/category/green.jpg" alt="offer for today" class="img-fluid">
                div>
  div>
div>

عکس‌ها کاملا اندازه‌های متفاوت دارد

milad karimi ۲۷ دی ۱۴۰۱، ۱۹:۴۴

درود

مجدد عرض میکنم که کل پروژه به همراه تصاویرش رو به صورت زیپ پیوست کنید.

نازنین کریمی مقدم ۲۷ دی ۱۴۰۱، ۲۱:۰۱

https://uupload.ir/view/question-bootstrap_ht0l.zip/

سلام و وقت بخیر کد رو آپلود کردم خدمت شما

milad karimi ۲۷ دی ۱۴۰۱، ۲۱:۳۲

ممنون بابت آپلود

درخواست دیگرم هم این هست که تیک تایید پاسخ رو روی تاپیکهایی که باز کردید بزنید تا از حالت پیگیری دربیاد. این پشت خیلی شلوغ شده.

در خط 13 فایل html اسم فایل رو اشتباه نوشتید و کلا استایل رو نمیخونه! باید به این صورت اصلاح شه:

  <link rel="stylesheet" href="css/_banner.css">

و اما مشکل: اینجا تصویر شما در یک div هست و وقتی بهش fit-content میدید میاد درون همون div فیت میکنه و به div مادر کاری نداره. کلا این ویژگی fit-content خیلی توصیه نمیشه چون در پروژه‌های واقعی شما ساختار تودرتو دارید و به هر div مقدار ارتفاع ثابت ندادید که بیاد محتوای درونش رو براساس اون ارتفاع ست کنه. پس بهترین راهکار چیه؟ استفاده از ارتفاع 100% به این صورت:

.custom-banner-image{
    height: 100% !important;
}

و در html هم باید هم به تصویر و هم به div پدرش این کلاس داده بشه (ترجیحا به هر سه محصول اعمال کنید تا یکدست بشه):

// <div class="card bg-dark text-white custom-banner-image">
                     // <img src="img/pictures banners/girl.jpg" class="card-img custom-banner-image" alt="green">
                     // <div class="card-img-overlay custom-card-imge-overlay">
                       // <h5 class="card-title">آدیداسh5>
                       // <p class="card-text">این برند محبوب در دنیا شناخته شده است لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهایp>
                        
                    //  div>
                   // div>

نازنین کریمی مقدم ۲۸ دی ۱۴۰۱، ۰۵:۳۰

وقت بخیر من اینکار رو کردم هم به تگ img خودم هم به تگ دربرگیرنده اش div ویژگی 100% رو اعمال کردم اما باز تصاویر فیت نشدند

milad karimi ۲۹ دی ۱۴۰۱، ۰۶:۳۵

خط 13 فایل html رو اصلاح کردید؟ اسم فایل استایل رو اشتباه نوشته بودید...

نازنین کریمی مقدم ۲۹ دی ۱۴۰۱، ۲۳:۲۶