Картинка не растягивается по ширине всего блока при абсолюте
Есть такой маленький блок с задним фоном, но когда я добавляю фон через абсолют, картинка не растягивается, хотя должна
а у меня встает вот так:
<div class="products">
<div class="container">
<div class="product-blocks">
<div class="product-block">
<img src="static/images/catalogproduct.png" alt="">
<p>Перегородки</p>
<h2>Цельностеклянные перегородки</h2>
<svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.7071 8.70711C31.0976 8.31658 31.0976 7.68342 30.7071 7.29289L24.3431 0.928932C23.9526 0.538408 23.3195 0.538408 22.9289 0.928932C22.5384 1.31946 22.5384 1.95262 22.9289 2.34315L28.5858 8L22.9289 13.6569C22.5384 14.0474 22.5384 14.6805 22.9289 15.0711C23.3195 15.4616 23.9526 15.4616 24.3431 15.0711L30.7071 8.70711ZM0 9H30V7H0V9Z" fill="white"/>
</svg>
</div>
</div>
</div>
</div>
.product-block img{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100px;
height: 100%;
object-fit: cover;
}
.product-block{
position: relative;
padding: 40px 0px 40px 40px;
width: 590px;
}
.product-block p{
font-family: 'Gilroy';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 100%;
color: #FFFFFF;
margin-bottom: 16px;
}
.product-block h2{
font-family: 'Gilroy';
font-style: normal;
font-weight: 400;
font-size: 30px;
line-height: 120%;
color: #FFFFFF;
margin-bottom: 68px;
}
.product-blocks{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
Источник: Stack Overflow на русском