تنسيق حجم الصور

خالد مجذوب · 15 أكتوبر 2020

السلام عليكم

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

وشكرا

بتاريخ 1 دقيقة مضت قال خالد مجذوب:

السلام عليكم

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

وشكرا

Yomna Raouf · 15 أكتوبر 2020

يمكنك التعديل على حجم الصور باستخدام css كما يلي:

img {

  width: 400px; /* العرض الذي تريده*/
  height: 300px; /* الطول الذي تريده*/
  object-fit: contain; /*و تحتفظ بمعالمها نقوم باستخدام هذا التنسيق حتى لا تتشتت الصورة */
  
}

Abdulhamid Hamsho2 · 15 أكتوبر 2020

مرحبًا @خالد مجذوب

يمكنك تعديل حجم الصور من خلال إضافة style خاص إلى عنصر الصور عن طريق ملف CSS.

حيث تسمح لك الخاصيتين Height و Width تعديل الإرتفاع والعرض للصورة.

في البداية عليك إضافة صنف (class) جديد لعنصر الصورة المراد تعديل حجمها من ثم الذهاب إلى ملف ال CSS الخاص بك وتقوم بإضافة العرض والإرتفاع المراد للصورة.

img {
  height: 200px;
  width: 50%;
}

أو يمكنك مباشر التعديل على ملف HTML من خلال إضافة الخاصية style كما في المثال التالي:

<img src="#" style="height: 200px; width: 50%;">

تم التعديل في 15 أكتوبر 2020 بواسطة Abdulhamid Hamsho

Omar Haddad2 · 15 أكتوبر 2020

من خلال إستخدام خصائص الارتفاع والعرض (width و height) وذلك لتعيين ارتفاع وعرض عنصر.

قد تحتوي خصائص الارتفاع والعرض على القيم التالية:

auto - هذا افتراضي. المتصفح يحسب الارتفاع والعرض
length - يحدد الارتفاع و العرض بالبكسل والسنتيمتر وما إلى ذلك.
% - يحدد الارتفاع والعرض بالنسبة المئوية للكتلة المحتوية
initial- يضبط الارتفاع و العرض على قيمته الافتراضية
inherit - سيتم توريث الارتفاع و العرض من قيمته الأصلية

أمثلة على ارتفاع وعرض CSS

المثال الأول من هنا : ستجد قيمة الإرتفاع 200 بكسل من الشاشة . بينما العرض تم وضع قيمته 50 بالنسبة المئوية ويتم حساب النسبة من عرض الصفحة
المثال الثاني من هنا : قيمة الإرتفاع 200 بكسل من الشاشة وقيمة العرض 500 بكسل

لتعرف على خاصية width بالتفصيل من wiki.hsoub

أيضاً لتعرف على خاصية height بالتفصيل من wiki.hsoub

Wael Aljamal · 15 أكتوبر 2020

أقترح عليك استخدام هذه التنسيقات الجميلة:

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery { <!-- تنسيق العنصر الحاوي للصور -->
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {  <!-- تأثير عند مرور الفأرة  -->
  border: 1px solid #777;
}

div.gallery img {  <!-- DIv تنسيق للصورة داخل العنصر -->
  width: 100%;
  height: auto;
}

div.desc {      <!-- توصيف الصورة ويقع أسفلها   -->
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
  <a target="_blank" href="img_5terre.jpg">
    <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_forest.jpg">
    <img src="img_forest.jpg" alt="Forest" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_lights.jpg">
    <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_mountains.jpg">
    <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

وسيكون شكلها :

تنسيق حجم الصور

السؤال

خالد مجذوب

رابط هذا التعليق

شارك على الشبكات الإجتماعية

4 أجوبة على هذا السؤال

Recommended Posts

Yomna Raouf

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Abdulhamid Hamsho2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Omar Haddad2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية