لدي مشكلة مع الصور في معرض الأعمال

هنا صقر · 10 مايو 2023

لدي مشكلة في معرض الصور الخاص بالموقع الشخصي،

الصور لا تملأ المساحة المحددة والدوائر الخاصة للضغط لتنقل عبر الصور صغيرة جدا.
وجزاكم الله خيراً.

كود HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="موقع شخصي لهنا صقر">
        <meta name="author" content="Hana Sakr">
        <title>Hana's personal website</title>
        <link rel="stylesheet" href="./css/fontawesome-all.min.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/slider.css">
    </head>

    <body>
        <header>
            <div class="container">
                <div id="branding">
                    <h1><i class="fas fa-user-circle"></i> صفحة <span class="highlight"> اسم الطالب </span></h1>
    
                </div>
                <nav>
                    <ul>
    
                        <li class="current"> <a href="index.html"> الصفحة الرئيسية</a></li>
                        <li><a href="gallery.html"> معرض الاعمال</a> </li>
                    </ul>
                </nav>
            </div>
        </header>
        <section class="main"> 
            <section id="slider" class="container">
                <div id="wrapper">
                    <div class="content">
                        <img src="img/clouds.jpeg">
                    </div>
                    <div class="content">
                        <img src="img/butterfly.jpeg">
                    </div>
                    <div class="content">
                        <img src="img/stars.jpeg">
                    </div>
                    <div class="content">
                        <img src="img/wave.jpeg">
                    </div>
                </div>
                <div id ="navLinks">
                    <ul>
                        <li class="itemLinks" data-pos="0"></li>
                        <li class="itemLinks" data-pos="1"></li>
                        <li class="itemLinks" data-pos="2"></li>
                        <li class="itemLinks" data-pos="3"></li>
                    </ul>
                </div>
            </section>
        </section>
            <section id="footer">
                <p>blablabla &copy; <span id="currentYear"></span></p>
            </section>
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/script.js"></script>
    <script src="js/slider.js"></script>
</html>

كو CSS:

#slider{
    position: relative;
    margin: auto;
    margin-top: 20px;
    height: 500px;
    border: 5px black solid;
    overflow: hidden;
}
#wrapper {
    width: 400%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}
#wrapper .content {
    float: right;
    width: 25%;
    height: 100%;
}

#wapper .content img{
    width: 100%;
}

#navLinks{
    text-align: center;
    position: absolute;
    top: 0;
    right: 45%;
}
#navLinks ul{
    margin: 0px;
    padding: 0px;
    display: inline-block;
    margin-top: 6px;
}

#navLins ul li{
    float: right;
    text-align: center;
    margin: 10px;
    padding: 5px;
    cursor: pointer;
    background-color: blanchedalmond;
    list-style: none;
    border: black 5px solid;
    border-radius: 50%;
}
#navLinks ul li:hover{
    background-color: brown;
}
#navLinks ul li.active{
    background-color: blue;
}
#navLinks ul li.active:hover{
    background-color: rgb(154, 133, 129);
}

مرفق الملفات:

gallery.html slider.css

Adnane Kadri · 10 مايو 2023

حاولي إعطاء العرض 100 بالمئة للصور داخل الحاويات content. فيكون:

.content img{
    width: 100%;
}

سيكون هذا كفيلا بتحجيم الصور على نحو كامل.

أما بخصوص أحجام دوائر التنقل، فهذا بسبب أن هنالك خطأ بتوصيف محدد الدوائر، انتبهي:

#navLins ul li
^^^^^^^^^^^^^^

اذ يفترض ان يكون:

#navLinks ul li

ان كان السؤال يخص دورة من دورات الأكاديمية فيستحسن أن يوضع السؤال أسفل الفيديو في قسم تعليقات الطلبة.

Mustafa Suleiman · 10 مايو 2023

أرجو منك رفع مجلد المشروع بالكامل فهناك ملف style.css لم يتم إرفاقه، وإرفاق صورة للمشكلة لديك.

وبخصوص الصورة يجب أن يتم وضع مساحة للعنصر الأب ثم وضع خاصية width:100% للصورة وبذلك ستشغل مساحة الأب فقط، وهناك خواص أخرى مثل:

background-size: cover;

محمد Fahmy · 11 مايو 2023

يبدو أن المشكلة في عرض الصور في المعرض. لحل هذه المشكلة، يمكنك استخدام خاصية CSS max-width مع قيمة 100٪ لجعل عرض الصور يملأ المساحة المحددة.

يمكنك أيضًا تعديل حجم الدوائر الخاصة بالضغط للتنقل عبر الصور.

قم بتعديل الجزء الخاص بالصور في الكود CSS كما يلي:

#wrapper .content img{
    width: 100%;
    max-width: 100%;
    height: auto;
}

وتأكد من تعديل اسم العنصر في الكود CSS لتصحيح الخطأ الإملائي في السطر الثامن ليصبح كالتالي:

#wrapper .content img{
    width: 100%;
}

ويمكنك كذلك تعديل حجم الدوائر الخاصة بالضغط للتنقل عبر الصور في الكود CSS كالتالي:

#navLinks ul li{
    width: 10px;
    height: 10px;
    margin: 10px;
    padding: 5px;
    cursor: pointer;
    background-color: blanchedalmond;
    list-style: none;
    border: black 5px solid;
    border-radius: 50%;
}

بعد إجراء هذه التغييرات، يجب أن تبدو الصور بحجم أكبر في المعرض ويمكنك الضغط على الدوائر للانتقال بين الصور.

لدي مشكلة مع الصور في معرض الأعمال

السؤال

هنا صقر

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

Recommended Posts

Adnane Kadri

Mustafa Suleiman

محمد Fahmy

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية