html - example - ছবির ভেতরের ছবিতে ছবিটির নিচে অতিরিক্ত স্থান রয়েছে



css image (6)

কেন নিম্নলিখিত কোডে div উচ্চতা img উচ্চতা তুলনায় বড়? ছবির নিচে একটি ফাঁক আছে, কিন্তু এটি একটি প্যাডিং / মার্জিন বলে মনে হচ্ছে না।

ইমেজ নীচের ফাঁক বা অতিরিক্ত স্থান কি?

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}
<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

https://ffff65535.com


দ্রুত ঠিক করা:

ইমেজ অধীনে ফাঁক মুছে ফেলার জন্য , আপনি করতে পারেন:

  • vertical-align চিত্রটির vertical-align সম্পত্তি সেট করুন vertical-align: bottom; vertical-align: top; বা vertical-align: middle;
  • প্রদর্শনের জন্য ইমেজ প্রদর্শন বৈশিষ্ট্য সেট করুন display:block;

একটি লাইভ ডেমো জন্য নিম্নলিখিত কোড দেখুন:

#vAlign img {
  vertical-align :bottom;
}
#block img{
  display:block;
}

div {border: 1px solid red;width:100px;}
img {width:100px;}
<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

ব্যাখ্যা: কেন ইমেজ অধীনে একটি ফাঁক আছে?

ইমেজ অধীনে ফাঁক বা অতিরিক্ত স্থান একটি বাগ বা সমস্যা নয়, এটি ডিফল্ট আচরণ। মূল কারণটি হল ইমেজগুলি প্রতিস্থাপিত হয়েছে ( vertical-align এবং W3C )। এটি তাদের "চিত্রের মতো কাজ করতে" দেয় এবং তাদের নিজস্ব অভ্যন্তরীণ মাত্রা, অনুপাত অনুপাত ....
ব্রাউজারগুলি তাদের প্রদর্শনের সম্পত্তিকে ইনলাইনে গণনা করে কিন্তু তারা তাদের একটি বিশেষ আচরণ দেয় যা তাদেরকে inline-block উপাদানগুলির কাছাকাছি করে তোলে (আপনি তাদের উল্লম্বভাবে সারিবদ্ধ করতে পারেন, তাদের উচ্চতা, শীর্ষ / নিম্ন মার্জিন এবং প্যাডিং, রূপান্তর ...)।

এর অর্থ হল:

[...] যখন চিত্রগুলি লম্বালম্বি-সারিবদ্ধ সঙ্গে একটি ইনলাইন ফর্ম্যাটিং প্রেক্ষাপটে ব্যবহৃত হয়: বেসলাইন, ইমেজটির নীচে ধারকের বেসলাইনে প্রদর্শিত হবে । ( উত্স: W3C , জোর খনি )

ডিফল্ট হিসাবে ব্রাউজারগুলি উল্লম্ব-সারিবদ্ধ সম্পত্তি বেসলাইনে গণনা করে, এটি ডিফল্ট আচরণ। নিচের ছবিটি কোথায় দেখায় বেসলাইনটি পাঠ্যতে অবস্থিত:

বেসলাইন সংমিশ্রণ উপাদানগুলি নীচের চিত্রটিতে আপনি দেখতে পারেন এমন বেসলাইনের নীচে প্রসারিত descenders জন্য স্থান রাখতে হবে (যেমন j, p, g ... )। এই কনফিগারেশনে, ইমেজটির নীচে বেসলাইনে সংযোজন করা হয়েছে যা আপনি এই উদাহরণে দেখতে পারেন:

div{border:1px solid red;}
img{width:100px;height:auto;}
<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>

এজন্য <img> ট্যাগের ডিফল্ট আচরণটি এর পাত্রে নীচে একটি ফাঁক তৈরি করে এবং কেন উল্লম্ব-সারিবদ্ধ সম্পত্তি বা প্রদর্শনের সম্পত্তি পরিবর্তন করে তা নিম্নোক্ত ডেমোতে সরিয়ে দেয়:

div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}

.block img{
  display:block;
}
.bottom img{
  vertical-align:bottom;
}
<p>Default:</p>
<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>


আপনাকে যা করতে হবে সব এই সম্পত্তি বরাদ্দ করা হয়:

img {
    display: block;
}

ডিফল্ট দ্বারা চিত্র এই সম্পত্তি আছে:

img {
    display: inline;
}

আমি line-height:0 ব্যবহৃত line-height:0 এবং এটি আমার জন্য জরিমানা কাজ করে।


আমি এটি ব্যবহার করে মহান কাজ খুঁজে পাওয়া যায় নি: ব্লক; ইমেজ এবং উল্লম্ব-সারিবদ্ধ উপর: শীর্ষ; টেক্সট উপর।

.imagebox {
    width:200px;
    float:left;
    height:88px;
    position:relative;
    background-color: #999;
}
.container {
    width:600px;
    height:176px;
    background-color: #666;
    position:relative;
    overflow:hidden;
}
.text {
    color: #000;
    font-size: 11px;
    font-family: robotomeduim, sans-serif;
    vertical-align:top;
    
}

.imagebox img{ display:block;}
<div class="container">
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
</div>

অথবা আপনি কোডটি একটি JS FIDDLE সম্পাদনা করতে পারেন


একজন পিতামাতার লাইনের উচ্চতাও নির্মূল করতে পারে:

#wrapper {
  line-height: 0;
}

সমস্ত সংশোধন: http://jsfiddle.net/FaPFv/


ডিফল্টরূপে, একটি চিত্র একটি অক্ষরের মত ইনলাইন রেন্ডার করা হয়।

এটি একই লাইনে বসে থাকে যা একটি, বি, সি এবং ডি বসতে।

আপনি f, j, p এবং q মত অক্ষর খুঁজে পেতে descenders জন্য যে লাইন নীচের স্থান আছে।

আপনি অন্যত্র (যেমন middle ) অবস্থান করতে ছবিটির vertical-align সমন্বয় করতে পারেন বা display পরিবর্তন করতে পারেন যাতে এটি ইনলাইন হয় না।





image