ডিভের সাথে ফিট করার জন্য চিত্রের আকার সামঞ্জস্য করা (বুটস্ট্র্যাপ)


100

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

যদি এটি পর্যাপ্ত কোড না হয় তবে আমি আরও সরবরাহ করতে পেরে খুশি হব এবং আমি যে সমস্ত ত্রুটি উপেক্ষা করছি তা ঠিক করার জন্য আমি উন্মুক্ত।

এইচটিএমএল এখানে

<div class="span3 top1">  
        <div class="row">
          <div class="span3 food1">
              <img src="images/food1.jpg" alt="">
          </div>
        </div>
            <div class="row">
              <div class="span3 name1">
                  heres the name
            </div>
            </div>
          <div class="row">
              <div class="span3 description1">
                  heres where i describe and say "read more"
            </div>
            </div>


      </div>

আমার সিএসএস

.top1{

    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;


}

.food1{

background-color:#000000;
height:230px;


}

.name1{

background-color:#555555;
height:90px;

}

.description1{

background-color:#777777;
height:70px;


}

: আমি একটি অনুরূপ প্রশ্নের উত্তর এখানে পোস্ট করেছেন stackoverflow.com/questions/41870216/...
FredyWenger

উত্তর:


59

আপনি চিত্রগুলি widthএবং heightএর স্পষ্টরূপে সংজ্ঞা দিতে পারেন , তবে ফলাফলগুলি সবচেয়ে ভাল দেখাচ্ছে না।

.food1 img {
    width:100%;
    height: 230px;
}

jsFizz


... আপনার মন্তব্য অনুযায়ী, আপনি কেবল যে কোনও ব্লক করতে পারেন overflow- উচ্চতা দ্বারা সীমাবদ্ধ কোনও চিত্র দেখতে এই উদাহরণটি দেখুন এবং এটি খুব প্রশস্ত কারণ এটি খুব প্রশস্ত।

.top1 {
    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;
    overflow: hidden;
}

.top1 img {
    height:100%;
}

দুর্ভাগ্যক্রমে আপনারা যেমন বলেছেন, ফলটা সবচেয়ে ভাল হয় না, তা আমি করেছিলাম। আদর্শভাবে, আমি ইমেজগুলি সঙ্কুচিত হওয়া চাই যাতে চিত্রটির উচ্চতা ডিভের দৈর্ঘ্যের সাথে ফিট করে এবং সীমাবদ্ধ ডিভের প্রস্থের চেয়ে বেশি হওয়া চিত্রটির প্রস্থটি লুকানো থাকে। যদি এটি বোধ হয়
হাসিফ্রেইক 24

হ্যাঁ আমি যা খুঁজছি! তোমাকে অনেক ধন্যবাদ!
হাসিফ্রেইক 24

অন্য উত্তরটি সর্বোত্তম, ইমাগ ট্যাগটিতে কেবল শ্রেণি = "আইএমজি-প্রতিক্রিয়াশীল" যুক্ত করা কৌশলটি কার্যকর!
iMobaio

4
ভাল থেকে width:100%;হয় max-width:100%;এবং ভাল তাদের ক্লাস হয় img-responsiveBS3 অথবা img-fluidBS4 হবে।
নবী KAZ

175

এইভাবে চেষ্টা করুন:

<div class="container">
    <div class="col-md-4" style="padding-left: 0px;  padding-right: 0px;">
        <img src="images/food1.jpg" class="img-responsive">
    </div>
</div>

হালনাগাদ:

বুটস্ট্র্যাপ 4 এ img-responsiveপরিণত হয় img-fluid, সুতরাং বুটস্ট্র্যাপ 4 ব্যবহার করে সমাধানটি হ'ল:

<div class="container">
    <div class="col-md-4 px-0">
        <img src="images/food1.jpg" class="img-fluid">
    </div>
</div>

5
কুল! শ্রেণি = "img- প্রতিক্রিয়াশীল" সাহায্য করেছে। সম্ভবত এটিই আজ গ্রহণযোগ্য উত্তর হওয়া উচিত।
অনুপম

4
শ্রেণি = "img- প্রতিক্রিয়াশীল" হল নির্ধারিতভাবে যাওয়ার উপায়! এটি গ্রহণযোগ্য উত্তর হওয়া উচিত।
iMobaio

29
এটা img-fluidএখন নাimg-responsive
wordsforthewise

51

বুটস্ট্র্যাপ 4 এর img-fluidপরিবর্তে এখনimg-responsive কেবলমাত্র শীর্ষগুলি ব্যবহার করে , তাই সমস্যা দেখা দিলে আপনি কোন সংস্করণটি ব্যবহার করছেন তা ডাবল পরীক্ষা করে দেখুন।


4
img-fluidএটা কি পারে ! ধন্যবাদ!
পিয়ানো

32

কেবল img-responsiveআপনার imgট্যাগটিতে ক্লাস যুক্ত করুন , এটি বুটস্ট্র্যাপ 3-এর পরে প্রযোজ্য!


দুঃখিত তবে আপনি কি দয়া করে নির্দিষ্ট করতে পারেন, আমি আপনার প্রশ্নটি সঠিকভাবে পাচ্ছি না, ধন্যবাদ!
শশী

7

আমি একই সমস্যা ছিল এবং নিম্নলিখিত সহজ সমাধানে হোঁচট খেয়েছি। ইমেজটিতে কিছুটা প্যাডিং যুক্ত করুন এবং এটি ডিভের মধ্যে ফিট হওয়ার জন্য নিজেকে আকার পরিবর্তন করে।

<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>

4
কাস্টম সিএসএসের চেয়ে বুটস্ট্র্যাপের সাহায্যে সমাধান করা হয়েছে। ধন্যবাদ.
ম্যাটগ্রিন

7

আমি এটি ব্যবহার করি এবং আমার পক্ষে কাজ করি।

<div class="col-sm-3">
  <img src="xxx.png" style="width: auto; height: 195px;">
</div>

4

আপনারা যদি কেউ বুটস্ট্র্যাপ -4 সন্ধান করেন । এটা এখানে

<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>

এটি আদর্শ সমাধান নয় যদি এতে পাঠ্য সহ অন্য কোনও কলাম থাকে কারণ এটি সীমান্তের প্রান্তের বিরুদ্ধেও কঠোর হবে
জেমস বার্ক

2

বেশিরভাগ সময়, বুটস্ট্র্যাপ প্রকল্প jQuery ব্যবহার করে, তাই আপনি jQuery ব্যবহার করতে পারেন।

শুধু সঙ্গে প্রস্থ এবং পিতা বা মাতা উচ্চতা পেতে JQuery.offsetHeight()এবং JQuery.offsetWidth(), এবং সন্তান উপাদান তাদের সেট JQuery.width()এবং JQuery.height()

আপনি যদি এটিকে প্রতিক্রিয়াশীল করতে চান তবে উপরের পদক্ষেপগুলিও আবার করুন $(window).resize(func)

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.