سلام من فضای خالی بین عکس هارو چه طور باید پر کنم؟ عکس کامل بلاک رو پر کنه
درود. 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 برای تغییر اندازه تصویر بدون تغییر نسبت ابعاد استفاده کنید:
.block {
width: 100%;
height: 300px;
overflow: hidden; /* از خروج تصویر از بلاک جلوگیری میکند */
}
.block img {
width: 100%;
height: 100%;
object-fit: cover; /* تصویر بلاک را به طور کامل پر میکند */
object-position: center; /* تصویر را در مرکز بلاک قرار میدهد */
}