html img - تحتوي الصورة الموجودة داخل div على مساحة إضافية أسفل الصورة




css image (9)

لماذا في التعليمة البرمجية التالية يكون ارتفاع div أكبر من ارتفاع img ؟ هناك فجوة تحت الصورة ، ولكن لا يبدو أن الحشو / الهامش.

ما هي الفجوة أو المساحة الإضافية أسفل الصورة؟

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


Answers

لقد وجدت أنه يعمل بشكل رائع باستخدام display: block؛ على الصورة والمحاذاة العمودية: أعلى؛ على النص.

.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/


إصلاح سريع:

لإزالة الفجوة أسفل الصورة ، يمكنك:

  • قم بتعيين الخاصية 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 ولكنها تعطيها سلوكًا خاصًا مما يجعلها أقرب إلى عناصر 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>


لقد أضفت float:left إلى div ونجحت


يمكنك استخدام عدة طرق لهذه المشكلة مثل

  1. باستخدام line-height

    #wrapper {  line-height: 0px;  }
    
  2. باستخدام display: flex

    #wrapper {  display: flex;         }
    #wrapper {  display: inline-flex;  }
    
  3. استخدام display: block ، table ، flex and inherit

    #wrapper img {  display: block;    }
    #wrapper img {  display: table;    }
    #wrapper img {  display: flex;     }
    #wrapper img {  display: inherit;  }
    

هناك خيار آخر مقترح here هو تعيين نمط الصورة على أنه style="display: block;"


بشكل افتراضي ، يتم تقديم صورة مضمنة ، مثل الحرف.

يجلس على نفس السطر الذي يجلس عليه a و b و c و d.

توجد مسافة أسفل هذا الخط للأحرف التي تجدها على أحرف مثل f ، j ، p و q.

يمكنك ضبط vertical-align للصورة لوضعها في مكان آخر (مثل middle ) أو تغيير display بحيث لا تكون مائلة.


كل ما عليك القيام به هو تعيين هذه الخاصية:

img {
    display: block;
}

الصور افتراضيا لديها هذه الخاصية:

img {
    display: inline;
}

هذا ما نجحني:

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px;"> </div>

position:fixed الاستخدام position:fixed بدلاً من position:absolute ، وبهذه الطريقة حتى إذا قمت بالتمرير لأسفل سيتم توسيع القسم إلى نهاية الشاشة.





html css image