با CSS می‌تونی تصاویر رو زیباتر، ریسپانسیو و جذاب‌تر کنی.

🔹 ۱. تصویر ریسپانسیو

img {
  max-width: 100%;
  height: auto;
}

✅ تصویر با توجه به عرض صفحه کوچک میشه و از کادر بیرون نمیزنه.

🔹 ۲. تصویر با گوشه‌های گرد

img {
  border-radius: 15px;
}

یا دایره‌ای کامل:

img {
  border-radius: 50%;
}

🔹 ۳. تصویر با حاشیه (Border)

img {
  border: 5px solid #ff6347;
}

🔹 ۴. سایه برای تصویر

img {
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

🔹 ۵. تصویر با فیلتر (Filter)

img {
  filter: grayscale(100%);   /* سیاه سفید */
  filter: blur(5px);         /* محو */
  filter: brightness(120%);  /* روشن‌تر */
}

🔹 ۶. تصویر Hover Effect

img {
  transition: transform 0.3s ease;
}

img:hover {
  transform: scale(1.1);  /* بزرگ شدن هنگام هاور */
}

🔹 ۷. تصویر در وسط صفحه

img {
  display: block;
  margin: 0 auto;
}

🔹 ۸. ترکیب چند استایل

img {
  border-radius: 20px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
  transition: transform 0.3s;
}

img:hover {
  transform: scale(1.05) rotate(2deg);
}

✅ با این تکنیک‌ها می‌تونی به راحتی تصاویر رو ریسپانسیو، زیبا و جذاب کنی.