আমি বুটস্ট্র্যাপ ৩ ব্যবহার করে একটি ক্যাটালগ করি tablets ট্যাবলেটগুলিতে প্রদর্শিত হলে পণ্য চিত্রগুলি তাদের ছোট আকারের (500x500) এবং ব্রাউজারে 767 পিক্সেলের প্রস্থের কারণে কুশ্রী লাগে। আমি চিত্রটি পর্দার মাঝখানে রাখতে চাই, তবে কোনও কারণে আমি তা করতে পারি না। সমস্যা সমাধানে কে সাহায্য করবে?
উত্তর:
আপনি যদি বুটস্ট্র্যাপ v3.0.1 বা ততোধিক ব্যবহার করে থাকেন তবে পরিবর্তে আপনার এই সমাধানটি ব্যবহার করা উচিত । এটি কাস্টম সিএসএসের সাহায্যে বুটস্ট্র্যাপের স্টাইলগুলিকে ওভাররাইড করে না, তবে পরিবর্তে একটি বুটস্ট্র্যাপ বৈশিষ্ট্য ব্যবহার করে।
আমার মূল উত্তরটি উত্তরোত্তর জন্য নীচে দেখানো হয়েছে
এটি একটি আনন্দদায়ক সহজ সমাধান। কারণ .img-responsiveবুটস্ট্র্যাপ ইতিমধ্যে সেট করে থেকে display: block, আপনি ব্যবহার করতে পারেন margin: 0 autoইমেজ কেন্দ্রে:
.product .img-responsive {
margin: 0 auto;
}margin: 0 autoআইএমজি-রেসপন্টিক পরিবর্তনের পরিবর্তে নতুন ক্লাস তৈরি করা ভাল ।
নেই .center-blockটুইটারে বর্গ বুটস্ট্র্যাপ 3 ( v3.0.1 যেহেতু ), তাই ব্যবহার:
<img src="..." alt="..." class="img-responsive center-block" />class="img-responsive" style="margin: 0 auto;"আমার জন্য কাজ class="img-responsive center-block"করে না (বুটস্ট্র্যাপ 3, তবে কয়েক মাস পুরানো একটি সংস্করণ)
<a href="#"> </a>জোড়ের মধ্যে আবৃত থাকে , ক্লিকযোগ্য ক্ষেত্রটি ঘেরের ধারকটির পূর্ণ প্রস্থে প্রসারিত হবে যা আপনার চিত্রের চেয়ে কিছুটা বড় হতে পারে। এটি এমন ব্যবহারকারীদের বিভ্রান্ত করতে পারে যারা তাদের "ফাঁকা" স্থান মনে করেন তারা ক্লিক করেন।
center-blockকোনও ছবিতে কেবল ক্লাস যুক্ত করুন , এটি বুটস্ট্র্যাপ 4 এর সাথেও কাজ করে:
<img src="..." alt="..." class="center-block" />দ্রষ্টব্য: ব্যবহৃত হয় center-blockএমনকি কাজ করেimg-responsive
শুধু ব্যবহার .text-centerবর্গ আপনি বুটস্ট্র্যাপ 3 ব্যবহার করছেন।
<div class="text-center">
<img src="..." alt="..."/>
</div>দ্রষ্টব্য: এটি img- প্রতিক্রিয়াশীল সঙ্গে কাজ করে না
img-responsive
@media (max-width: 767px) {
img {
display: table;
margin: 0 auto;
}
}display: table? এটি ইতিমধ্যে display: blockযা margin: 0 autoকাজ করতে যথেষ্ট
আপনি এখনও img-responsiveএই স্টাইল বর্গ দিয়ে অন্যান্য চিত্র প্রভাবিত না করে কাজ করতে পারেন ।
আপনি এই ট্যাগটি বিভাগের আইডি / ডিভিডি আইডি / শ্রেণীর সাথে একটি অর্ডার নির্ধারণ করতে পারেন যার মধ্যে imgএটি নেস্ট করা রয়েছে। এই প্রথাটি img-responsiveকেবলমাত্র সেই অঞ্চলে কাজ করবে।
ধরুন আপনার এইচটিএমএল অঞ্চলটি এই হিসাবে সংজ্ঞায়িত হয়েছে:
<section id="work">
<div class="container">
<div class="row">
<img class="img-responsive" src="some_image.jpg">
</div>
</div>
</section>তারপরে, আপনার সিএসএস হতে পারে:
section#work .img-responsive{
margin: 0 auto;
}দ্রষ্টব্য: এই উত্তরটি img-responsiveসামগ্রিকভাবে পরিবর্তনের সম্ভাব্য প্রভাবের সাথে সম্পর্কিত । অবশ্যই, center-blockসহজ সমাধান।
এই কোডটি চেষ্টা করে দেখুন এটি বুটস্ট্র্যাপ 4 এর সাথেও ছোট আইকনগুলির জন্য কাজ করবে কারণ কোনও সেন্টার-ব্লক শ্রেণি নেই বুটস্ট্র্যাপ 4 তাই এই পদ্ধতিটি চেষ্টা করে দেখুন এটি সহায়ক হবে। আপনি নিজের উপর নির্ভর .col-md-12করে .col-md-8বা .col-md-4এটি সেট করে চিত্রের অবস্থান পরিবর্তন করতে পারেন ।
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-xs-center text-lg-center">
<img src="" class="img-thumbnail">
</div>
</div>
</div>
</div>এটা চেষ্টা কর:
.img-responsive{
display: block;
height: auto;
max-width: 100%;
margin:0 auto;
}
.Image{
background:#ccc;
padding:30px;
}<div class="Image">
<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>সমস্ত চিত্রের থাম্বনেলগুলি কেবল একটি সারি / কর্ন ডিভের ভিতরে রেখে দিন:
<div class="row text-center">
<div class="col-12">
# your images here...
</div>
</div>এবং সবকিছু ঠিকঠাক কাজ করবে!
ইতিমধ্যে দেওয়া উত্তরগুলিতে যুক্ত করতে, এর img-responsiveসাথে সংমিশ্রণটি img-thumbnailসেট display: blockহয়ে যাবে display: inline block।
<div class="col-md-12 text-center">
<img class="img-responsive tocenter" />
</div>।
<style>
.tocenter {
margin:0 auto;
display: inline;
}
</style>আপনি এটি নির্ধারণ মার্জিন: 0 অটো দিয়ে ঠিক করতে পারেন
অথবা আপনি কল-এমডি-অফসেট ব্যবহার করতে পারেন
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.img-responsive{
margin:0 auto;
}
</style>
<body>
<div class="container">
<h2>Image</h2>
<div class="row">
<div class="col-md-12">
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>
</div>
</div>
</body>
</html>কেবলমাত্র স্ট্যান্ডার্ড ক্লাস ব্যবহার করে সমস্ত বুস্ট্র্যাপ অবজেক্টগুলিতে প্রয়োগ করার জন্য আরও সঠিক উপায়টি হবে শীর্ষ এবং নীচের মার্জিনগুলি সেট না করা (যেমন চিত্রটি পিতামাতার কাছ থেকে উত্তরাধিকারী হতে পারে), তাই আমি সর্বদা ব্যবহার করছি:
.text-center .img-responsive {
margin-left: auto;
margin-right: auto;
}আমি এর জন্য একটি গিস্টও তৈরি করেছি, সুতরাং কোনও বাগের কারণে যদি কোনও পরিবর্তনগুলি প্রয়োগ হয় তবে আপডেট সংস্করণটি সর্বদা এখানে থাকবে: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66
এখনও পর্যন্ত গ্রহণ করার সর্বোত্তম সমাধান বলে মনে হচ্ছে <img class="center-block" ... />। তবে কেউ কীভাবে center-blockকাজ করে তা উল্লেখ করেননি ।
উদাহরণস্বরূপ বুটস্ট্র্যাপ v3.3.6 নিন:
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}ডিফল্ট মান dispalyজন্য <img>হয় inline। মান blockএকটি উপাদানকে ব্লক উপাদান হিসাবে (যেমন <p>) প্রদর্শন করবে । এটি একটি নতুন লাইনে শুরু হয় এবং পুরো প্রস্থ গ্রহণ করে। এইভাবে, দুটি মার্জিন সেটিংস চিত্রটিকে অনুভূমিকভাবে মাঝখানে থাকতে দেয়।
:)