آموزش طراحی تصویر واکنشگرا برای وب سایت

در این مقاله می آموزید که چطور با استفاده از CSS و Html یک تصویر واکنش گرا ایجاد کنید.

تصویر واکنش گرا بصورت اتوماتیک به اندازه سایز صفحه نمایش، تنظیم میشود.

مرورگرتان را تغییر سایز دهید تا افکت واکنش گرای تصویر زیر را مشاهده کنید:

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

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

مولفه های height و width را مطابق یکدیگر تنظیم کنید تا تصویر درست به نظر بیاید و از ویژگی border-radius استفاده کنید تا به تصویر حاشیه دورانی اضافه کنید. استفاده از 50% باعث میشود تصویر به شکل دایره نمایش داده شود

.responsive {
  width: 100%;
  height: auto;
}


                

<h2>Responsive Images</h2>



<p>اندازه پنجره مرورگر را تغییر دهید تا اثر را ببینید</p>

<img src="http://articles.tahlildadeh.com/image.axd?picture=img_nature_wide.jpg" alt="Nature" class="responsive" width="600" height="400">

 

خروجی Responsive Images  

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

اگر می خواهید سایز تصویرتان در صورت لزوم کاهش یابد، ولی هیچگاه از اندازه اصلی خودش بزرگتر نشود ، از max-width: 100% استفاده کنید:

.responsive {
  max-width: 100%;
  height: auto;
}
                

<h2>Responsive Images مثال 2</h2>

<p>اگر می خواهید سایز تصویرتان در صورت لزوم کاهش یابد، ولی هیچگاه از اندازه اصلی خودش بزرگتر نشود ، از این کد استفاده کنید</p>

<p>max-width: 100% </p>

<p>اندازه پنجره مرورگر را تغییر دهید تا اثر را ببینید</p>

<img src="http://articles.tahlildadeh.com/image.axd?picture=img_nature_wide.jpg" alt="Nature" class="responsive" width="600" height="400">

 

خروجی مثال 2 Responsive Images  

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

اگر میخواهید تصویر واکنش گرا را به حداکثر اندازه ش محدود کنید، از ویژگی max-width استفاده کنید با هر مقدار دلخواه تان به پیکسل :

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

                

<h2>Responsive Images مثال 3</h2>

<p>اگر میخواهید تصویر واکنش گرا را به حداکثر اندازه ش محدود کنید،  از ویژگی زیر با هر مقدار دلخواهتان به پیکسل استفاده کنید</p>

<p>اندازه پنجره مرورگر را تغییر دهید تا اثر را ببینید</p>

<img src="http://articles.tahlildadeh.com/image.axd?picture=img_nature_wide.jpg" alt="Nature" class="responsive" width="600" height="400">

 

خروجی مثال 3 Responsive Images