it-swarm.dev

الصور لا تستجيب بشكل افتراضي في Twitter Bootstrap 3؟

يبدو أن الإصدار الجديد 3.0 يجب أن أقوم بتعيين أسماء الفئات للصورة على col-lg-4 col-sm-4 col-4 إذا كانت الصورة جزءًا من div مع نفس أسماء الفئات لجعل الصورة تستجيب مع جميع نقاط التوقف.

في الإصدار 2 ، صور CSS الخصائص الموروثة بشكل افتراضي خصائص div الأصل.

هل هذا صحيح؟

56
Laurent-514

Bootstrap 4

بالنسبة إلى Bootstrap 4 ، استخدم Sass (SCSS):

// make images responisve by default
img {
  @extend .img-fluid;    
}

تم تحديث الإجابة للإصدار 3

يحتوي Bootstrap 3 على فئة خاصة للصور سريعة الاستجابة (اضبط الحد الأقصى للعرض على 100٪). يتم تعريف هذه الفئة على النحو التالي:

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

ملاحظة يتم الحصول على علامة img افتراضيًا:

img {
     vertical-align: middle;
     border: 0;
     page-break-inside: avoid;
     max-width: 100% !important;
     }

لذا استخدم class="img-responsive" لجعل صورك سريعة الاستجابة.

لجعل جميع الصور تستجيب افتراضيًا:

css: أضف الكود أدناه تحت bootstrap css:

   img {
          display: block;
          height: auto;
          max-width: 100%;
   }

أقل: أضف الكود أدناه في mixins.less الخاص بك:

img {
  &:extend(.img-responsive);
}

ملاحظة: يتطلب أقل 1.4.0. راجع: https://stackoverflow.com/a/15573240/1596547

دائري

img العلامات داخل دائري تستجيب بشكل افتراضي

القواعد الدلالية

انظر أيضًا إجابة @ its-me ( https://stackoverflow.com/a/18653778/1596547 ). باستخدام ما ورد أعلاه لجعل جميع صورك سريعة الاستجابة بشكل افتراضي ، يحول صورك إلى حظر عناصر المستوى . لا يُسمح باستخدام عناصر مستوى الكتلة في الفقرات (<p>) ، راجع: https://stackoverflow.com/a/4291515/1596547

بقدر ما أفهم يتم التمييز بين عناصر مستوى الكتلة مقابل العناصر المضمنة مع مجموعة أكثر تعقيدًا من فئات المحتوى. راجع أيضًا: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level . لذا في HTML5 ، يمكن أن تحتوي العلامة p على أي عنصر صياغى متداخل مع بيانات الأحرف العادية. (راجع: http://www.w3.org/TR/html-markup/p.html ) علامة img هي عنصر الصياغة. القيمة الافتراضية للعلامة img لخاصية العرض هي بالفعل inline-block. لا يؤدي تغيير خاصية العرض المراد حظرها إلى انتهاك أي من القواعد السابقة.

تأخذ عناصر مستوى الحظر (display:block) جميع المساحة المتاحة لوالدهم ، وهو ما يبدو بالضبط ما تتوقعه للصور سريعة الاستجابة. لذلك يبدو إعداد display: block; خيارًا معقولًا ، والذي يجب تفضيله فوق إعلان inline-block.

الصور داخل العناصر p التي تتطلب inline-block كما توحي @ its-me ( https://stackoverflow.com/a/18653778/1596547 ) قد لا تكون سريعة الاستجابة على الإطلاق.

142
Bass Jobsen

اقتراح ممتاز بواسطةBassJobsen ، لكنني أستخدم display: inline-block; بدلاً من display: block; لأن ذلك يبدو أكثر دلالة 1 (مما يعني أنه يمكنك أن تكون متأكدًا بدرجة أكبر من أنك لا تعبث في مكان آخر).

لذا ، يبدو لي مثل هذا:

img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

(أرجو أن تخبرني ما إذا كان فهمي معيبًا. :)


[1]: بالنسبة للشخص ، يتم دائمًا التفاف الصور في عنصر على مستوى الكتلة إذا كانت هذه هي حالة الاستخدام ؛ ثم ، مرة أخرى ، نستخدم أيضًا الصور في عناصر مثل الفقرات (p) ، حيث سيكون inline-block أكثر ملاءمة من عنصر block.

13
its_me

حصلت هنا بعد محاولة معرفة ما إذا كان تطبيق img-responsive آمنًا لجميع الصور.

قادني الجواب منits_me إلى الاعتقاد بأنه ليس من الآمن تطبيق هذا على الصور تحت عنصر p.

لا يبدو أن هذا ما يعتقده فريق Bootstrap.

هذا هو السبب في أن الصور لا تستجيب افتراضيًا في bootstrap3:

الخلاصة هي أنه يكسر الكثير من التطبيقات المصغّرة للجهات الخارجية (بما في ذلك خرائط Google) ، والتي لا تتوقع أن يتم تغيير حجم الصور داخلها بالقوة إلى عروض أخرى. هذا هو السبب في أننا استعادنا أسلوب Bootstrap v2 "الصور تستجيب افتراضيًا" في Bootstrap v3 لصالح فئة .img سريعة الاستجابة.

https://github.com/twbs/bootstrap/issues/18178#issuecomment-154180107

0
tepez