Установка высоты родительского элемента img нарушает flex align-items и text-align - PullRequest
Новая
       45

Установка высоты родительского элемента img нарушает flex align-items и text-align

0 голосов
/ 04 августа 2020

У меня есть приложение для аукционов, где списки отображаются с изображением и текстовым описанием справа. Я хочу, чтобы .img имел максимальную высоту и максимальную ширину 90%. Max-width работает, но для того, чтобы заставить работать max-height, мне нужно установить высоту блока, содержащего .img (.a_img). Как только я это сделаю, align-items: center; и выравнивание текста: по центру; объявления .image больше не работают. Что происходит и как я могу это обойти? Спасибо. 

.listings {
    display: flex;
    margin-bottom: 1rem;
    height: 116.8px;
}

.image {
    flex: 1.2;
    display: flex;
    align-items: center;
    text-align: center;
    max-height: 100%;
}

.text {
    flex: 2;
}

.img {
    max-height: 90%;
    max-width: 90%;
}

.a_img {
    height: 100%;
}
<div class="listings">
    <div class="image">
        <a class="a_img" href="www.google.com">
            <img class="img" src="https://cdn.shopify.com/s/files/1/2660/5202/products/shopify-image_0c6f7a25-f7ae-409f-a89b-df63d9c7b463_1400x.jpg?v=1586379733" alt="Product Image">
        </a>
    </div>
    <div class="text">
        some text<br>some text<br>some text<br>some text
    </div>
</div>

1 Ответ

1 голос
/ 04 августа 2020

вы можете просто заменить max-height на height на .image, а затем изменить все, что хотите, на ожидаемый результат, например, следующий 

.listings {
  display: flex;
  margin-bottom: 1rem;
  height: 116.8px;
}

.image {
  /*flex: 1;*/
  /* altered */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  /* altered */
}

.text {
  flex: 1;
}

.img {
  max-height: 90%;
  max-width: 90%;
}

.a_img {
  height: 100%;
}
<div class="listings">
  <div class="image">
    <a class="a_img" href="www.google.com">
      <img class="img" src="https://cdn.shopify.com/s/files/1/2660/5202/products/shopify-image_0c6f7a25-f7ae-409f-a89b-df63d9c7b463_1400x.jpg?v=1586379733" alt="Product Image">
    </a>
  </div>
  <div class="text">
    some text<br>some text<br>some text<br>some text
  </div>
</div>
...