Как сделать блок position:absolute на всю высоту родителя?

Question

[Илья]

Не кидайте камнями за мою CSS безграмотность, но потратил уже целый день на решение этого вопроса - результат нулевой.

В общем постараюсь кратко, насколько получится - есть карточка товара на странице каталога, в ней ссылка-картинка и остальное.
Я немного доработал и вместо 1 картинки теперь отображаются нескольо. Вместо слайдера понравилось решение как на сайте авто ру. Используется позициониование.

<div class="brazzers-wrapper">
   <div class="Brazzers">
      <div class="Brazzers__page">
         <div class="Brazzers__image-wrapper">
            <img src="1">
         </div>
         <div class="Brazzers__image-wrapper">
            <img src="2">
         </div>
       </div>
    </div>
 </div>

.Brazzers, .Brazzers__page {
    display: -webkit-box;
    display: flex;}
.Brazzers {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;}
.Brazzers__page {
    position: static;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-align: end;
    align-items: flex-end;
    height: 100%;}
.Brazzers:not(:hover) .Brazzers__page:first-child .Brazzers__image-wrapper, .Brazzers__page:hover .Brazzers__image-wrapper {
    z-index: -1;
    opacity: 1;}
.Brazzers__page .Brazzers__image-wrapper {
    opacity: 0;}
.Brazzers__image-wrapper {
    z-index: -2;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    text-align:center;
}
.Brazzers__image, .Brazzers__image-wrapper {
    position: absolute;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 4px;}
.brazzers-wrapper {
    width: 27%;
    position: relative;
    height: 308px;
    z-index: 999;
    float: left;
}

Проблема в следующем - блок с картинкой не имеет точного размера. Имеет только ширину в %.
На сайте этот блок схлопывается, т.к. не указана высота. Если прописать высоту главного блока - тот все отлично.
Как решить эту проблему не прибегая к фиксированной высоте?

Заранее спасибо и P.S. - ссылку не могу дать, т.к. сайт на локалке.

Comments

[Антон Литвиненко]

Да и пускай себе будет у картинки фиксированная высота. В данном случае так даже лучше

[Илья]

Антон Литвиненко, ну в тот то и дело, что не пускай))) Я ж не просто так пишу сюда. Блок должен быть % от ширины экрана и никак иначе. Фикс в моем случае не применим.

[Антон Литвиненко]

Илья, в смысле пропорции одинаковые? Дайте родителю картинок паддинг в процентах. Например для соотношения 16:9
padding-bottom: 56%;

[Илья]

Антон Литвиненко, на самом деле я тоже об этом думал. По крайней мере, добавление padding - единственный рабочий вариант из всего, что я пробовал. Но мне кажется это не самое изящное решение, больше похоже на костыль, который требует доработки)))
И еще один момент, так как 90% моих картинок квадратные - работает width:30% и padding:30% - идеально. Но есть и картинки другого размера. В этом случае конечно все плывет.
Очень надеюсь, что найдутся люди, которые подскажут корректное решение этой задачи. И скорее всего, ответ должен быть очевидный и простой))
Спасибо Антон!

Answer 1

[Сергей Зенькович]

.Brazzers__image-wrapper img {
width: 100%;
height: auto;
}

Comments

[Илья]

Эх, если бы все было так просто. Это не работает.