تصبح الصور مربعة في العرض على الهاتف المحمول

الدعم
1

لاحظت أن العديد من الصور المرفوعة يتم ضغطها لتصبح صورًا “مربعة” في العرض على الأجهزة المحمولة.
هل يمكنني معرفة ما إذا كان هذا تصميمًا متوقعًا أم نتيجة لإعداد معين؟
شكرًا جزيلاً!

العرض على الأجهزة المحمولة:

image
image391×307 56.2 KB

العرض على الكمبيوتر لنفس الصورة:

image
image925×460 145 KB

2

رفع صورة للتأكيد

image
image508×290 16.6 KB

تم رفع هذه الصورة من هاتفي iPhone الذي يعمل بنظام iOS 14، وقد ظهرت بشكل صحيح. ربما يتم ضغط الصورة على هاتفك قبل رفعها؟ إنها تعمل بشكل جيد بالنسبة لي.

ما هو المتصفح وإصداره الذي تستخدمه؟ وما هو نظام تشغيل الهاتف وإصداره الذي تعمل عليه؟

3

لاحظ أن الصورة هي نفسها في كلتا الحالتين، لكن يتم عرضها على الهاتف المحمول؟ يبدو أن حساب نسبة العرض إلى الارتفاع أو الارتفاع قد اختل.

4

شكرًا على الرد.

لا أعتقد أنه يتم ضغط الصورة، حيث قمت برفع لقطة شاشة مباشرة.

المتصفح الذي استخدمته على الكمبيوتر هو Chrome.
أما على الهاتف، فهو Android 10.

هذا هو رابط الصورة التي واجهت فيها المشكلة والتي نشرتها:

ربما ترغب في التحقق مما إذا كنت تواجه نفس المشكلة مع الصورة في الرابط أعلاه؟

5

نعم، إنها نفس الصورة، لكنها تظهر بشكل مختلف على الكمبيوتر والهاتف المحمول.

6

ذلك بسبب قواعد CSS من سمة/مكون مخصص:

// السمة: حجم التعبيرات
// الهدف: scss للجوال
// آخر تعديل: 2016-02-10 14:39:25 UTC

div.contents.regular > div > p > img{
    height:100px;
    width:100px;
}
div.d-editor-container > div.d-editor-preview-wrapper > div > p > img{
    height:100px;
    width:100px;
}
7

شكرًا جزيلاً لك على تحديد السبب الجذري! ومع ذلك، لا يزال لدي ارتباك بشأن مكان العثور على هذه القاعدة. هل لديك أي فكرة عن كيفية تعديلها أو تغييرها؟

8

في لوحة المسؤول الخاصة بك، انتقل إلى تخصيص > السمات. اختر السمة أو المكون المناسب، ثم انقر على تعديل CSS/HTML، وفحص تبويب CSS، وربما يكون في التبويب العلوي للجوال. يجب أن تجد كود CSS المقابل مكتوبًا في مكان ما، ويمكنك إما التعليق عليه أو حذفه:

(تم التعليق عليه هنا)

// Theme: 表情大小
// Target: mobile scss
// Last Edited: 2016-02-10 14:39:25 UTC
/*
div.contents.regular > div > p > img{
    height:100px;
    width:100px;
}
div.d-editor-container > div.d-editor-preview-wrapper > div > p > img{
    height:100px;
    width:100px;
}*/
9

نعم، إزالة المشكلة قد حلّت المشكلة. شكرًا جزيلاً!