آموزش CSS - تصاویر

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

• ویژگی border

ویژگی border در CSS برای تنظیم حاشیه اطراف یک عنصر از جمله تصاویر استفاده می شود. می توان از آن برای تنظیم عرض، استایل و رنگ حاشیه استفاده کرد.

در اینجا مثالی از نحوه استفاده از ویژگی border برای افزودن حاشیه به یک تصویر آورده شده است:

img {
  border: 2px solid black;
}

در این مثال، ما تمام عناصر img را در صفحه انتخاب کرده ایم و ویژگی border را روی 2px عرض، استایل جامد و رنگ مشکی قرار داده ایم. می توانید مقادیر ویژگی border را برای تغییر عرض، سبک و رنگ حاشیه در صورت نیاز تنظیم کنید.

شایان ذکر است که ویژگی border یک حاشیه در اطراف کل عنصر، از جمله هر padding یا حاشیه اضافه می کند. اگر می‌خواهید یک حاشیه فقط به خود تصویر اضافه کنید، بدون اینکه روی padding یا حاشیه تأثیر بگذارد، می‌توانید تصویر را در یک عنصر div قرار دهید و ویژگی border را روی div اعمال کنید. مثلا:

:Html

<div class="image-wrapper">
  <img src="example.jpg">
</div>

:CSS

.image-wrapper {
  border: 2px solid black;
}

در این مثال، ما عنصر img را در یک div با یک کلاس از "image-wrapper" پیچیده‌ایم، و ویژگی border را به عنصر div اعمال کرده‌ایم. این یک حاشیه فقط در اطراف خود تصویر اضافه می کند، بدون اینکه بر روی لایه یا حاشیه تاثیر بگذارد.

• ویژگی height 

در حالی که ویژگی height در CSS می تواند برای تنظیم ارتفاع یک تصویر استفاده شود، معمولا بهترین راه برای انجام این کار نیست. این به این دلیل است که تصاویر اغلب دارای ابعاد ذاتی هستند، به این معنی که آنها دارای عرض و ارتفاع خاصی هستند که توسط خود تصویر به جای CSS تعریف می شود.اگر از ویژگی height برای تنظیم ارتفاع یک تصویر استفاده کنید، اگر نسبت ابعاد (نسبت عرض به ارتفاع) حفظ نشود، ممکن است ابعاد  تصویر رانامناسب کنید. به عنوان مثال، اگر ارتفاع یک تصویر را کوچکتر از ارتفاع ذاتی آن تنظیم کنید، تصویر فشرده و مخدوش می شود.در عوض، اغلب بهتر است از ویژگی width برای تنظیم اندازه تصویر استفاده کنید و اجازه دهید ارتفاع به طور خودکار بر اساس نسبت تصویر تنظیم شود.

در اینجا یک مثال است:

img {
  width: 300px;
}

در این مثال، ما تمام عناصر img را در صفحه انتخاب کرده ایم و ویژگی width را روی 300 پیکسل قرار داده ایم. ارتفاع تصویر به طور خودکار بر اساس نسبت تصویر تنظیم می شود و نسبت های آن را حفظ می کند.

اگر به دلایلی نیاز به تنظیم صریح ارتفاع تصویر دارید، بهتر است این کار را با استفاده از ویژگی height به همراه ویژگی width انجام دهید تا نسبت تصویر را حفظ کنید. در اینجا یک مثال است:

img {
  width: 300px;
  height: auto;
}

در این مثال، ما ویژگی height را روی auto قرار داده‌ایم، به این معنی که ارتفاع به طور خودکار بر اساس نسبت تصویر تنظیم می‌شود، در حالی که ویژگی width را روی 300 پیکسل نگه می‌دارد. این از حالت نامناسب ابعاد تصویر جلوگیری می کند. 

• ویژگی width 

ویژگی width در CSSمعمولا برای تنظیم عرض یک تصویر استفاده می شود. در اینجا مثالی از نحوه استفاده از آن آورده شده است:

img {
  width: 500px;
}

در این مثال، ما تمام عناصر img را در صفحه انتخاب کرده ایم و ویژگی width را روی 500 پیکسل قرار داده ایم. این باعث می شود تمام تصاویر موجود در صفحه دارای عرض 500 پیکسل باشند.لازم به  ذکر است که تنظیم ویژگی عرض یک تصویر بر ارتفاع تصویر تاثیری نخواهد داشت و در صورت عدم حفظ نسبت ابعاد (نسبت عرض به ارتفاع) می‌تواند منجر به ایجاد تغییر در تصاویر شود. برای جلوگیری از تحریف تصویر، می توانید ویژگی height را روی auto تنظیم کنید که باعث می شود ارتفاع تصویر به طور خودکار بر اساس نسبت تصویر تنظیم شود.

img {
  width: 500px;
  height: auto;
}

در این مثال، ویژگی height را روی auto تنظیم کرده‌ایم که به شما امکان می‌دهد ارتفاع تصویر به طور خودکار بر اساس نسبت تصویر تنظیم شود، در حالی که همچنان عرض 500 پیکسل را حفظ می‌کند. این از تحریف تصویر جلوگیری می کند.

• ویژگی -moz-opacity

ویژگی -moz-opacity یک ویژگی قدیمی و غیر استاندارد CSS است که در نسخه های قدیمی فایرفاکس برای تنظیم شفافیت یک عنصر از جمله تصاویر استفاده می شد. با این حال، این ویژگی دیگر توسط نسخه های مدرن فایرفاکس یا هر مرورگر وب دیگری پشتیبانی نمی شود.

در عوض، ویژگی Opacity استاندارد در CSS باید برای تنظیم کدورت یک تصویر استفاده شود. در اینجا مثالی از نحوه استفاده از آن آورده شده است:

img {
  opacity: 0.5;
}

در این مثال، ما تمام عناصر img را در صفحه انتخاب کرده ایم و خاصیت opacity را روی 0.5 قرار داده ایم که تصویر را نیمه شفاف می کند.

ویژگی Opacity مقداری بین 0 (کاملا شفاف) و 1 (کاملاً مات) می گیرد. شما می توانید مقدار را برای تنظیم سطح مورد نظر از کدورت تنظیم کنید.

شایان ذکر است که ویژگی opacity بر شفافیت کل تصویر، از جمله هر حاشیه یا سایر سبک‌های اعمال شده روی آن تأثیر می‌گذارد. اگر می‌خواهید کدورت فقط محتوای تصویر و نه عناصر اطراف را تنظیم کنید، می‌توانید از ویژگی پس‌زمینه رنگ همراه با opacity استفاده کنید، مانند این:

img {
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

در این مثال، ما ویژگی background-color را با استفاده از تابع rgba() روی یک رنگ سفید نیمه شفاف قرار داده‌ایم و خاصیت opacity را روی 1 قرار داده‌ایم. این باعث می‌شود که محتوای تصویر نیمه شفاف باشد در حالی که عناصر اطراف را باقی می‌گذارد. مانند مرزها) کاملاً مات است.

  * تبریک میگم شما درس تصاویر را با موفقیت مطالعه کردید و به پایان رساندید ،حالا پیش به سوی درس بعدی و یادگیر بیشتر...*