طراحی شبکه تصاویر واکنش گرا

مقالات برنامه نویسی

طراحی شبکه تصاویر واکنش گرا با Responsive Image Grid

در این مقاله می آموزید که چگونه یک شبکه تصویر (image grid) ریسپانسیو با استفاده از CSS و جاوا اسکريپت ایجاد کنید

در این مقاله می آموزید چطور یک شبکه تصویر ایجاد کنید که تعداد چهار یا دو تصویر تمام عرض را بنا بر سایز صفحه نمایش ، از هم متمایز کند.

یک شبکه تصویر ایجاد کنید

قدم اول : کد HTML را اضافه کنید.
مثال :

قدم دوم : کد CSS را اضافه کنید.
مثال :

برای ایجاد یک چیدمان واکنش گرا از CSS Flexbox استفاده کنید

                                .row {
                  display: flex;
                  flex-wrap: wrap;
                  padding: 0 4px;
                }

                /* Create four equal columns that sits next to each other */
                .column {
                  flex: 25%;
                  max-width: 25%;
                  padding: 0 4px;
                }

                .column img {
                  margin-top: 8px;
                  vertical-align: middle;
                  width: 100%;
                }

                /* Responsive layout - makes a two column-layout instead of four columns */
                @media screen and (max-width: 800px) {
                  .column {
                    flex: 50%;
                    max-width: 50%;
                  }
                }

                /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
                @media screen and (max-width: 600px) {
                  .column {
                    flex: 100%;
                    max-width: 100%;
                  }
                }

نمونه مثال Responsive Image Grid:



<!-- Header -->

<div class="header">

  <h1>Responsive Image Grid</h1>

  <p>اندازه پنجره مرورگر را تغییر دهید تا تأثیر ریسپانسیو را مشاهده کنید</p>

</div>

<!-- Photo Grid -->

<div class="row">

  <div class="column">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=wedding.jpg">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=rocks.jpg">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=falls2.jpg">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=paris.jpg">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=nature_4.jpg">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=mist.jpg">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=paris.jpg">

  </div>

  <div class="column">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=underwater.jpg">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=ocean.jpg">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=wedding.jpg">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=mountainskies.jpg">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=rocks.jpg ">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=underwater.jpg ">

  </div>

  <div class="column">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=wedding.jpg ">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=rocks.jpg ">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=falls2.jpg ">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=paris.jpg ">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=nature_4.jpg ">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=mist.jpg ">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=paris.jpg ">

  </div>

  <div class="column">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=underwater.jpg ">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=ocean.jpg ">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=wedding.jpg ">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=mountainskies.jpg ">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=rocks.jpg ">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=underwater.jpg ">

  </div>

</div>