اليوم نشرت مقالة جديدة، وتظهر الصورة في قسم المعاينة مع تجاوز للحدود.
عند عرض المقالة المنشورة، تظهر الصورة متجاوزة للحدود ومخفية جزئيًا.
المقالات السابقة لم تواجه هذه المشكلة. هل هذه عيب برمجي؟ وكيف يمكن إصلاحه؟
الرابط: https://babyforex.net/t/xu-huong-thi-truong-forex-21-08-2019-gold-xau-usd-gbp-usd-aud-usd/169
لنرَ، هذه صورة مقاسها 1700 × 480 بكسل:
يبدو الأمر على ما يرام. هل قمت بتجاوز تنسيقات CSS في موقعك مما يسبب تداخلاً؟ لا أستطيع تكرار أي مشكلة تتعلق بصورة عريضة.
كما قمت بالنقر عبر الموقع ولم ألاحظ أي مشكلة في موقعك، حتى في هذا الموضوع. تبدو جميع الصور طبيعية وليست مقطوعة بشكل مصطنع.
لاحظ أن تضمين اقتباسات داخل اقتباسات (أو حتى اقتباسات بسيطة) يحد من عرض المنشور، لذا قد تلاحظ بعض الغرابة في تلك الحالات.
مثل هذا، تخيل أن هذه كانت صورة
لم أستطع العثور على أي مشكلة. ويجب عليّ تجاوز CSS في لوحة الإدارة لإصلاح هذا الأمر.
يمكنني تكرار المشكلة دون أي صعوبة، لذا لا أعرف عما تتحدث. راجع المنشور أعلاه الذي يحتوي على صورة عريضة.
الفيديو لا يساعد، حاول إعادة إنتاجه هنا على ميتا. أضف صورة عريضة إلى ردك التالي.
هذه هي صورتي بعرض 1500 بكسل.
لقد تحققت، وهذه المشكلة تظهر فقط في هذه المقالة عندما أقوم بإدراج محتوى طويل من مقالة أخرى.
أعتقد أن هذه المشكلة ناتجة عن كود الاقتباس BB Code.
جميع المقالات الأخرى تعمل بشكل صحيح.
لا أرى أي مشكلة في الصور أعلاه؟
هذا يعني أن هناك مشكلة في منتداك. لكنني لم أجد أي مشكلة. حاولت إزالة جميع الإضافات ومكونات القالب ولم أستطع إصلاح هذا الخطأ.
الآن يجب أن أضيف هذا الكود CSS في CSS المخصص لإصلاح المشكلة:
.d-editor-preview .image-wrapper img, .lightbox-wrapper img, .cooked img.d-lazyload {
width: 100%;
height: auto;
}
لقد حاولت مقارنة CSS من موقعي مع discourse.
في موقعي،
#reply-control .d-editor-preview img:not(.thumbnail), .cooked img:not(.thumbnail) {
max-width: 1200px;
max-height: 628px;
}
html
<img src="https://babyforex.net/uploads/default/original/1X/10670fd0bf4b34154ae4447feff1fc93f5eaed7e.jpeg" alt="h%C3%ACnh%20%E1%BA%A3nh" data-base62-sha1="2l6rNxc3PYiacNMqRTIM4GcaAjA" width="1200" height="526" class="d-lazyload">
في discourse:
#reply-control .d-editor-preview img:not(.thumbnail), .cooked img:not(.thumbnail) {
max-width: 690px;
max-height: 500px;
html:
<img src="https://d11a6trkgmumsb.cloudfront.net/optimized/3X/e/9/e98710650be7c014168330f7c60d7081340c89cb_2_690x194.jpeg" alt="image" data-base62-sha1="xjSCGCdDwgRqb1OJkiAZNgbEQEr" width="690" height="194" class="d-lazyload" srcset="https://d11a6trkgmumsb.cloudfront.net/optimized/3X/e/9/e98710650be7c014168330f7c60d7081340c89cb_2_690x194.jpeg, https://d11a6trkgmumsb.cloudfront.net/optimized/3X/e/9/e98710650be7c014168330f7c60d7081340c89cb_2_1035x291.jpeg 1.5x, https://d11a6trkgmumsb.cloudfront.net/optimized/3X/e/9/e98710650be7c014168330f7c60d7081340c89cb_2_1380x388.jpeg 2x">
في discourse يكون العرض دائمًا 690 بكسل
لكن في موقعي هو 1200 بكسل والصور مخفية.
وهذا خطأ مني، وليس عيبًا. لقد قمت بإصلاحه.
غيّر القيمة إلى الافتراضي.
شكرًا لك!