اذهب إلى المحتوى

السؤال

نشر

كنت احاول تصميم بعض صفحات الهبوط فواجهة مشكلة 

في مقاسات الصور ليس تعديل المقاسات بلغة css

بل المشكلة اني لا اجد على الانترنت مقاسات صور مناسبة لمواقع الويب فمثلا نحن نعلم ان مقاس صورة الانستغرام هي 1:1 هل هناك مقاسات معينة لمواقع الويب

وكيف اجعل الصورة نفسها متجاوبة مع جميع الشاشات 

Recommended Posts

  • 0
نشر

هذا يعتمد على الصورة التي تحاول  التعامل معها فمثلاً إذا كانت الصورة هي صورة خلفية فالأفضل ان تستخدم معها اسلوب (اخذ طول وعرض العنصر الاب وان تأخذ طريقة العرض cover) مثل :

#myImg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

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

واذا كانت الصور هي عبارة عن بطاقات فيمكنك استخدام صور بقياسات ثابتة أو قص الصور التي تحصل عليها من المستخدمين في حال كانت ديناميكية للحصول على صور بأبعاد ثابتة وتثبيت هذه الابعاد على 280px عرض (اصغر قياس شاشة) والطول الذي تريده.

او يمكنك استخدام اكثر من صورة لكل من الشاشات المختلفة.

وحتى مع القيام بكل الخطوات السابقة فلن تكون الصورة كما تريدها بالضبط دائماً على كل الشاشات وستحتاج للكثير من التعديلات حتى تحصل على النتيجة التي تريدها تماماً وانت بحاجة للقيام بذلك اكثر من مرة حتى تحصل على المهارة اللازمة.

وبالعودة لسؤالك فإن كان بإمكانك مشاركة المشكلة التي تواجهها تحديداً فقط استطيع مساعدتك بشكل افضل.

  • 0
نشر

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

وهناك العديد من المواقع التي توفر صور مجانية مثل freepik وغيرها:

وبخصوص تجاوب الصور:

ادارة الصور والفيديوهات في صفحات الويب

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...