0

Картинки в блоке имеют размеры. Меняю ширину блока в медиазапросе, высота картинки меняется, а высота 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>

6
  • высота картинки меняется, а высота item нет - дак если вы задали фиксированную высоту для блока item, то понятное дело, что он не будет уменьшаться
    – meine
    12 дек 2019 в 10:31
  • @meine ставлю heigth: auto; но не работает 12 дек 2019 в 10:35
  • .team-wrapper__item { /* ... */ height: 440px; /* ... */ }
    – yar85
    12 дек 2019 в 10:55
  • А вообще, высота элемента и не должна подстраиваться под изображение в background-image. Стейтмент height: auto; имеет смысл только при наличии контента у элемента. Фон - контентом не является.
    – yar85
    12 дек 2019 в 10:59
  • @ДмитрийСухоцкий, а так не пойдет stackblitz.com/edit/angular-zjdzge ? в зависимости от размера окна будет меняться кол-во столбцов
    – Pantera
    12 дек 2019 в 11:01

1 ответ 1

0
.team-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .team-wrapper__item{
    position: relative;
    width: 370px;
    height: 420px;
    /* padding-bottom: 16.25%; */
    margin-bottom: 15px;
    border: 1px solid red;

@media(max-width: 1140px){
  width: 32%;
  height: 0;
  padding-bottom: 35.25%;
}

&::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

&-1::before {
      background-image: url('https://i.ibb.co/z8dn2SB/team-1.png');
      background-repeat: no-repeat;
      background-size: 100%;
} 
&-2::before {      
    background-image: url('https://i.ibb.co/z8dn2SB/team-1.png');
    background-repeat: no-repeat;
    background-size: 100%;
  }
&-3::before {      
    background-image: url('https://i.ibb.co/z8dn2SB/team-1.png');
    background-repeat: no-repeat;
    background-size: 100%;              
  }
&-4::before {
    background-image: url('https://i.ibb.co/z8dn2SB/team-1.png');
    background-repeat: no-repeat;
    background-size: 100%;
  }
&-5::before {      
    background-image: url('https://i.ibb.co/z8dn2SB/team-1.png');
    background-repeat: no-repeat;
    background-size: 100%;
  }
&-6::before {      
    background-image: url('https://i.ibb.co/z8dn2SB/team-1.png');
    background-repeat: no-repeat;
    background-size: 100%;
  }

} }

1
  • Зачем before? Единственное что надо было добавить это строчка padding-bottom: 35%
    – Pantera
    12 дек 2019 в 14:11

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.