دوره زبان تخصصی برای برنامه‌نویسان (هدیه ویژه ثبت‌نام در دوره‌های متخصص) (فرصت محدود ⏰)
۰ ثانیه
۰ دقیقه
۰ ساعت
۱ Arash koLivand
Grid In css
جامعه Html & CSS ایجاد شده در ۲۵ دی ۱۴۰۳
سلام من فضای خالی بین عکس هارو چه طور باید پر کنم؟ عکس کامل بلاک رو پر کنه

درود.
1. استفاده از background-image:

اگر تصویر به عنوان پس‌زمینه بلاک استفاده می‌شه، از خاصیت‌های زیر برای پر کردن کامل بلاک استفاده کنید:

.block {
  width: 100%;
  height: 300px; /* ارتفاع بلاک */
  background-image: url('your-image.jpg');
  background-size: cover; /* تصویر به طور کامل پوشش داده می‌شود */
  background-position: center; /* تصویر در مرکز قرار می‌گیرد */
  background-repeat: no-repeat; /* از تکرار تصویر جلوگیری می‌کند */
}

2. استفاده از <img> و object-fit:

اگر از تگ <img> استفاده می‌کنید، از ویژگی object-fit برای تغییر اندازه تصویر بدون تغییر نسبت ابعاد استفاده کنید:

<div class="block">
  <img src="your-image.jpg" alt="Image">
</div>
.block {
  width: 100%;
  height: 300px;
  overflow: hidden; /* از خروج تصویر از بلاک جلوگیری می‌کند */
}
.block img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* تصویر بلاک را به طور کامل پر می‌کند */
  object-position: center; /* تصویر را در مرکز بلاک قرار می‌دهد */
}
سحر پاشائی ۲۶ دی ۱۴۰۳، ۱۱:۱۱