لقد قمت بتحديث منشوري قليلاً. جربه مرة أخرى. سيتعين عليك تجربة تغيير حجم الصورة للحصول عليها بالشكل الذي تريده. ليس لدي أي فكرة عن الحجم الذي تريده واستخدام 300 للجميع كان جيدًا بالنسبة لي. سيكون تغيير حجم الصورة مسألة ذوق.
أنا قريب من الحل … إنه خطأ كروم …
يبدو أنه في سفاري يبدو الأمر مثاليًا - شكرًا لمساعدتك
الآن السؤال هو: لماذا يفعل كروم هذا؟
إعجاب واحد (1)
لا أواجه أي مشاكل في متصفح Chrome على نظام Windows أو Safari على نظام iOS. لقد استخدمت كليهما لالتقاط لقطات الشاشة ونشرها. جرب الكود المحدث الذي نشرته. قد يصلح المشكلة.
[اقتباس=“Lilly, post:17, topic:267365, username:Lilly”]
[/اقتباس]
نفس المشكلة…
أي مشكلة؟ مشكلة تحجيم كروم؟
عذرًا على عدم الوضوح؛ المشكلة هي أنه عند استخدام متصفحي الرئيسي (Chrome)، لا يمكنني رؤية الشعار في التذييل. عند استخدام Safari، يمكنني رؤية الشعارات في التذييل. لقد حاولت أيضًا استخدام Chrome على جهاز MacBook الخاص بصديقتي، وعمل بشكل جيد بالنسبة لها؛ يمكننا رؤية الشعارات في التذييل. لذلك قد يكون هناك شيء غريب مع Chrome الخاص بي؛ ليس لدي أي فكرة عن ماهيته.
لاحظت أيضًا أنه على الهاتف، لم يتم قياس التنسيق بشكل صحيح - هل تعرف كيفية إصلاحه؟
هل تريد أن تتقلص الصور وتتوسع مع حجم الشاشة؟ يمكنك أيضًا إنشاء تذييل مختلف للعرض على الهاتف المحمول أو وضع التذييل في العرض المكتبي فقط. ستلاحظ وجود أقسام في شاشة تحرير HTML/CSS للعرض المكتبي والهاتف المحمول، مع نفس علامات التبويب مثل القسم المشترك.
من المحتمل أن تضطر إلى تجربة حجم الصور في HTML. ستحتاج على الأرجح إلى استخدام التحجيم النسبي بالنسبة المئوية، ولكن الصور بأحجام مختلفة، لذا سيكون الأمر صعبًا ما لم تكن جميع الصور بنفس الحجم. لست متأكدًا حقًا مما تريده.
إعجاب واحد (1)
اقترح شخص هنا أذكى مني بكثير أن تتحقق من ذلك في وضع التصفح المتخفي للمتصفح لاستبعاد أي إضافات تسبب مشاكل هناك.
أقترح عليك تغيير حجم الصور إلى أبعاد مماثلة يمكنك العمل بها ثم استخدام أقسام CSS و FOOTER المختلفة للعرض على سطح المكتب والجوال للحصول على ما تبحث عنه.
إعجاب واحد (1)
نعم، آسف لعدم الوضوح، أود أن تتكيف الشعارات مع حجم النافذة، سواء لسطح المكتب أو للجوال.
(استخدام وضع التصفح المتخفي كان فكرة رائعة 
)
مرحباً ميشيل،
هل يمكنك تجربة الكود التالي؟
HTML (لقد أزلت سمات width للصور وأضفت فئة wrap إلى الحاوية):
<div class="wrap custom-footer-image">
<a href="https://www.wur.nl/en.htm/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image"></a>
<a href="https://www.cirad.fr/en/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/d0cf79c6442d594dc4efe3a009cd04c277f9bea8.png" alt="Footer Image"></a>
<a href="https://www.uni-goettingen.de/en/1.html/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image"></a>
<a href="http://algorithmicbotany.org/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image"></a>
</div>
CSS:
.custom-footer-image {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
a {
flex: 1;
text-align: center;
img {
max-width: 100%;
}
}
}
كيف تظهر على سطح المكتب:
على الهاتف المحمول:
ما رأيك؟
يمكن تغيير تخطيط الهاتف المحمول إلى عمودين من صورتين إذا كانت صغيرة جدًا على الهواتف المحمولة.
4 إعجابات
يعمل بشكل مثالي، شكراً لكم جميعاً على الدعم الرائع!
إعجابَين (2)
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.