একটি প্রতিক্রিয়াশীল চিত্র কীভাবে তৈরি করা যায় যা বুটস্ট্র্যাপ 3 এও স্কেল করে

Question

আমি বর্তমানে টুইটার বুটস্ট্র্যাপ 3 ব্যবহার করছি এবং প্রতিক্রিয়াশীল চিত্রটি তৈরি করতে আমি একটি সমস্যার মুখোমুখি হয়েছি। আমি img-responsiveক্লাস ব্যবহার করেছি । তবে চিত্রের আকার বাড়ছে না। আমি যদি এর width:100%পরিবর্তে ব্যবহার করি max-width:100%তবে এটি পুরোপুরি কার্যকর হয়। সমস্যা কোথায়? এটি আমার কোড:

    <div class="col-md-4 col-sm-4 col-xs-12 ">
        <div class="product">               
                <div class="product-img ">
                   <img class="img-responsive" src="img/show1.png" alt="" />
                </div>
             </div>
     </div>

Answer 1

বুটস্ট্র্যাপের প্রতিক্রিয়াশীল চিত্রের শ্রেণি max-width100% এ সেট করে। এটি এর আকারকে সীমাবদ্ধ করে, তবে চিত্রের চেয়ে বড় মাপের উপাদানগুলি পূরণ করতে এটি প্রসারিত করতে বাধ্য করে না। widthআপসেলিংকে বাধ্য করার জন্য আপনাকে অ্যাট্রিবিউটটি ব্যবহার করতে হবে ।

http://getbootstrap.com/css/#images- প্রতিক্রিয়াশীল

Answer 2

নিশ্চিত জিনিস!

.img-responsive বুটস্ট্র্যাপের সাহায্যে চিত্রগুলিকে প্রতিক্রিয়াশীল করার সঠিক উপায় 3 আপনি যে ছবিটি প্রতিক্রিয়াশীল করতে চান তার জন্য কিছু উচ্চতা বিধি যুক্ত করতে পারেন কারণ দায়িত্ব সহ, উচ্চতার সাথে প্রস্থের পরিবর্তন, এটি ঠিক করুন এবং আপনি সেখানে রয়েছেন।

Answer 3

এটি আপনাকে এখনও সহায়তা করে কিনা তা নিশ্চিত নন ... তবে চিত্রটি আরও বড় করতে কিন্তু প্রতিক্রিয়াশীল রাখতে আমাকে একটি ছোট কৌশল করতে হয়েছিল

@media screen and (max-width: 368px) {
    img.smallResolution{
        min-height: 150px;
    }

}

আশা করি এটি পিএসকে সহায়তা করে সর্বাধিক প্রস্থ আপনার পছন্দ মতো কিছু হতে পারে

Comments

এটি কোনও চিত্রের স্থানীয় আকারের চেয়ে বৃহত্তর প্রদর্শন করতে পারে না।

— ইশারউড

Answer 4

যদি চিত্রটিতে একটি নির্দিষ্ট প্রস্থ নির্ধারণ করা কোনও বিকল্প না হয়, তবে এখানে বিকল্প সমাধান রয়েছে।

ডিসপ্লে সহ পিতামাতার দ্বিখণ্ডিত হওয়া: সারণী এবং সারণী-বিন্যাস: স্থির। তারপরে চিত্রটি প্রদর্শন করতে সেট করুন: টেবিল-ঘর এবং সর্বাধিক প্রস্থ 100%। এইভাবে চিত্রটি তার পিতামাতার প্রস্থের সাথে খাপ খায়।

উদাহরণ:

<style>
    .wrapper { float: left; clear: left; display: table; table-layout: fixed; }
    img.img-responsive { display: table-cell; max-width: 100%; }
</style>
<div class="wrapper col-md-3">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>

ফিডল: http://jsfiddle.net/5y62c4af/

Answer 5

আপনার সিএসএস স্টাইলশিটে নিম্নলিখিতটি ব্যবহার করে দেখুন:

.img-responsive{
  max-width: 100%;
  height: auto;
}

Answer 6

এটি করার চেষ্টা করুন:

1) আপনার সূচক। Html এ

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <a class="thumbnail" href="#">
    <div class="ratio" style="background-image:url('../Images/img1.jpg')"></div>
  </a>
</div>

2) আপনার স্টাইল। CSS এ

.ratio {
  position:relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%; 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;  
}

Answer 7

আমি দেখতে পেয়েছি যে আপনি ইমেজটিতে .col বর্গ স্থাপন করতে পারেন কৌতুকটি করবে - তবে এটি ক্লাসের সাথে সম্পর্কিত অন্য কোনও বৈশিষ্ট্য যেমন ভাসমান বাম হিসাবে এটি অতিরিক্ত প্যাডিং দেয় তবে এগুলি উদাহরণস্বরূপ কোনও প্যাডিং বলে বাতিল করা যেতে পারে these সংযোজন হিসাবে বর্গ

Answer 8

আমার ধারণা ছবিটি কলুষিতের চেয়ে বেশি। উদাহরণ: চিত্রের আকার 195px এক্স 146px।

এটি ট্যাবলেটগুলির মতো নিম্ন রেজোলিউশনের অভ্যন্তরে কাজ করবে। আপনার যখন 1280 এক্স 800 রেজোলিউশন রয়েছে তখন এটি বৃহত্তরকে বাধ্য করবে কারণ প্রস্থটি 100% রয়েছে। আইকন ফন্টের মতো মিডিয়া ক্যোয়ারির ভিতরে সিএসএস হতে পারে সেরা সমাধান best