Картинки в блоке имеют размеры. Меняю ширину блока в медиазапросе, высота картинки меняется, а высота item нет. Как сделать высоту автоматом под размер картинки
.team-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.team-wrapper .team-wrapper__item {
width: 370px;
height: 440px;
margin-bottom: 15px;
border: 1px solid red;
}
@media (max-width: 1140px) {
.team-wrapper .team-wrapper__item {
width: 32%;
}
}
.team-wrapper .team-wrapper__item-1 {
background-image: url('https://i.ibb.co/z8dn2SB/team-1.png');
background-repeat: no-repeat;
background-size: 100%;
}
.team-wrapper .team-wrapper__item-2 {
background-image: url('https://i.ibb.co/z8dn2SB/team-1.png');
background-repeat: no-repeat;
background-size: 100%;
}
.team-wrapper .team-wrapper__item-3 {
background-image: url('https://i.ibb.co/z8dn2SB/team-1.png');
background-repeat: no-repeat;
background-size: 100%;
}
.team-wrapper .team-wrapper__item-4 {
background-image: url('https://i.ibb.co/z8dn2SB/team-1.png');
background-repeat: no-repeat;
background-size: 100%;
}
.team-wrapper .team-wrapper__item-5 {
background-image: url('https://i.ibb.co/z8dn2SB/team-1.png');
background-repeat: no-repeat;
background-size: 100%;
}
.team-wrapper .team-wrapper__item-6 {
background-image: url('https://i.ibb.co/z8dn2SB/team-1.png');
background-repeat: no-repeat;
background-size: 100%;
}
<div class="team-wrapper">
<div class="team-wrapper__item team-wrapper__item-1"></div>
<div class="team-wrapper__item team-wrapper__item-2"></div>
<div class="team-wrapper__item team-wrapper__item-3"></div>
<div class="team-wrapper__item team-wrapper__item-4"></div>
<div class="team-wrapper__item team-wrapper__item-5"></div>
<div class="team-wrapper__item team-wrapper__item-6"></div>
</div>
высота картинки меняется, а высота item нет
- дак если вы задали фиксированную высоту для блокаitem
, то понятное дело, что он не будет уменьшаться.team-wrapper__item { /* ... */ height: 440px; /* ... */ }
background-image
. Стейтментheight: auto;
имеет смысл только при наличии контента у элемента. Фон - контентом не является.