حدد نصًا على عرض الصورة / عرض تلقائي في CSS

Question

أحاول بشكل أساسي إنشاء إصدار من عنصر "Figure" (القادم في HTML5) ، حيث لدي صورة مع وصف قصير تحتها.

ومع ذلك ، أريد أن أقصر عرض هذا العنصر بأكمله في الصورة ، وبالتالي فإن النص ليس أوسع من الصورة (الالتفاف على خطوط متعددة إذا لزم الأمر).

HTML الأساسي:

<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>

أنا على ما يرام مع CSS ولكن لا يمكنني التفكير في أي حل CSS نقي ، دون إضافة أ style="width:100px" إلى div لمطابقة عرض الصورة.

تحديث: بعد قليل من البحث والتفكير ، يبدو أن أفضل طريقة تستخدم عرضًا مضمّنًا على Div. سأحتفظ بسمة العرض على الصورة ، في حال كنت أتمنى أن يكون Div أوسع قليلاً من الصورة (على سبيل المثال لاستيعاب تعليق أطول).

يعني هذا النهج أيضًا أنه يمكن أن يكون لدي صورتان جنبًا إلى جنب مع تعليق أدناه. إذا كان لدي مجموعة من الصور بنفس الحجم ، يمكنني بالطبع إضافة نمط إضافي لكل منهما div.

شكرا لكل الذين أجابوا!

Answer 1

ورقة الأنماط

div.figure img,
div.figure div.caption {
    width: 100%;
}
div.figure div {
    overflow: hidden;
    white-space: nowrap;
}

ملاحظة: لتمكين التغليف فقط إزالة خط CSS الأخير

لغة البرمجة

<div class="figure" style="width:150px;">
    <img src="logo.png" alt="logo" />
    <div class="caption">A description for the image</div>
</div>

لقد راجعت ذلك في Chrome و Firefox و IE7 ويبدو جيدًا في الثلاثة. أدرك أن هذا له عرض على Div وليس IMG ، ولكن على الأقل تحتاج فقط إلى ضبط العرض في مكان واحد. أقل من استخدام التعبيرات عن CSS (أي فقط) لا يمكنني رؤية طريقة لتعيين عرض Divs الخارجي على عرض العنصر الأول للطفل.

Answer 2

يمكن أيضًا تحقيق ذلك باستخدام 'display: table-caption' للتسمية التوضيحية ، على النحو التالي:

لغة البرمجة

<div class="wrapper">
  <img src="image.jpg" />
  <div class="caption">My caption...</div>
</div>

ورقة الأنماط

.wrapper {
  display: table;
}

.caption {
  display: table-caption;
  caption-side: bottom;
}

يمكن أيضًا طرح هذه الكتلة يسارًا من نص آخر. لقد اختبرت هذا في IE8+. إليك مثال JSBIN: http://jsbin.com/xiyevovelixu/1

Answer 3

لإعداد العرض لمطابقة الصورة تلقائيًا يمكنك استخدامها

.figure {
  display: table;
  width: 1px;
}

هذا يجعل Div يتصرف مثل الجدول (غير مدعوم في Internet Explorer). أو يمكنك استخدام جدول بدلاً من div. لا أعتقد أن هناك طريقة أخرى لتحديد العرض تلقائيًا.

يحرر: أبسط طريقة هي نسيان العرض التلقائي ووضعه باليد. إذا كانت هناك حاجة حقًا ، فيمكنك استخدام JavaScript أو جدول. في هذه الحالة ، لا يكون استخدام الجدول قبيحًا جدًا لأنك تتناول قيودًا على إصدار HTML. في حالة البرمجة النصية من جانب الخادم ، يمكنك أيضًا تعيين العرض عند إنشاء الصفحة.

Answer 4

واجهت نفس المشكلة وبعد القراءة هذه قررت استخدام نمط مضمّن على العنصر المحيط. يبدو أن الحل الأفضل على استخدام جدول لي.

Answer 5

يمكنك استخدام display:table حل لجميع المتصفحات الأخرى ، و سلوك CSS لـ Internet Explorer.