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

كيفية جعل الصور تظهر بأبعاد موحدة داخل حاويات في الصندوق المرن flexbox في css

Noor Baroud

السؤال

اريد عمل ثلاث بوكسات كل واحد فيها صورة ثم يأتي الكلام اسفلها وضعت كل شي لكن الان المشكلة اريد جعلها تظهر في مستوى واحد وايضا جعل الصور كلها بنفس المقاس كيف افعلها؟

فيما يلي هيكلية HTML للعناصر المقصودة:

<section id="blocks">
   <div class="conten" style="flex:30%">
      <img src="pic/141.jpeg">
      <p>alboum to your wedding day, birthday, born baby, friends travel, graduation</p>
   </div>
   <div class="conten" style="flex:30%">
      <img src="pic/142.jpeg">
      <p>make it an physical or digital alboum, just as you like</p>
   </div>
   <div class="conten" style="flex:30%">
      <img src="pic/143.jpeg">
      <p>alboum to your wedding day, birthday, born baby, friends travel, graduation</p>
   </div>
</section>
                

وفيما يلي التنسيقات التي حاولت تطبيقها على العناصر:

#blocks
{
    margin-top: 20px;
    padding: 60px 120px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: flex-start;
}
#blocks .conten
{
    text-align: center;
    margin-left: 15px;
    position: relative;
}

@media (max-width:1020px)
{
    #blocks
    {
        flex-direction: column;
    }
}

مرفق ملفات المشروع:

testProject.zip

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

أولا يمكنك جعل كامل الصور على سطر واحد عن طريق إرفاق الحاوي blocks بالقيمة nowrap في الخاصية flex-wrap للتأكد من أن الصندوق المرن لن ينزل سطرا في حالة تجاوز عرض أحد الصناديق للمسافة المقصودة. 

#blocks
{
    margin-top: 20px;
    padding: 60px 120px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: flex-start;
    flex-wrap: nowrap; /*++++++++++++++++++++*/
}

بعد هذا سنحتاج إعطاء الصور عرضا وإرتفاعا متساويا وليكن على الخيار:

#blocks .conten img
{
    height: 500px;
    width: 500px;
}

لا أفضل هذا الخيار لأنه قد يؤدي إلى تبدد الصورة وعدم ظهورها بحجمها الفعلي، عوضا عن ذلك أفضل إعطاء الصور ارتفاعا متساويا وعرضا تلقائيا، وتقطيع أو إخفاء الأجزاء المتجاوزة من الصورة لعرض الحاوي. لنقم بإعطاء الحاوي conten القيمة hidden في الخاصية overflow:

#blocks .conten
{
    text-align: center;
    margin-left: 15px;
    position: relative;
    overflow: hidden;
}

ثم ارتفاعا متساويا وعرضا تلقائيا للصورة داخله:

#blocks .conten img
{
    height: 500px;
    width:auto;
}

ولفهم دور overflow:hidden في هذا قم بتعليق سطرها ولاحظ التأثير. 

توثيق الخاصية overflow .

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...