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

دانلود آموزش طراحی سایت

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

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

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

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

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

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

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

         <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>

جهت مشاهده نمونه مثال ها برروی دوره آموزش طراحی سایت کلیک نمایید.