Изображение начальной загрузки не регулирует высоту в соответствии с родителем

Question

У меня есть несколько кнопок с изображениями.Изображения внутри кнопки слишком велики.Я хочу, чтобы размеры изображений изменялись с помощью элемента кнопки, либо при изменении высоты кнопки, либо при изменении размера текста.Я использую класс Bootstrap-4 ("img-Fluid"), но ему не нравится, что он работает должным образом, так как высота изображения не меняется.

Мой HTML-код:

<div class="order-type-buttons col-12 d-flex" aria-label="First group">
<button type="button" class="btn order-type-btn-blue col-4 d-flex justify-content-center align-items-center">
    <div class="col-8 button-text">Online Pick Up</div>
    <div class="col-4 span-img">
        <img class="img-fluid" src="images/icon%20files/online-pickup-icon.png" alt="">
    </div>
</button>
<button type="button" role="button" class="btn order-type-btn-blue col-4 d-flex justify-content-center align-items-center">
    <div class="col-8 button-text">Online Take out</div>
    <div class="col-4 span-img">
        <img class="img-fluid" src="images/icon%20files/online-take-out-icon.png" alt="">
    </div>
</button>
<button type="button" class="btn order-type-btn-blue col-4 d-flex justify-content-center align-items-center">
    <div class="col-8 button-text">Pick up</div>
    <div class="col-4 span-img">
        <img class="img-fluid" src="images/icon%20files/pick-up-icon.png" alt="">
    </div>
</button>

Вот мой код CSS:

  .btn{
    white-space: normal;
}


.button-text{
    padding-left: 0;
    padding-right: 0;
}

.order-type-btn-blue{
    background-color: #0082d5;
    font-size:14px;
    color: white;
    text-transform: uppercase;
    margin: 2px 2px 2px 2px;
    padding-right: 0;
    padding-left: 0;
}
.order-type-buttons {
    padding-right: 0;
    padding-left: 0;
}
.span-img{
    padding-right: 0;
    padding-left: 0.313em;
}

Вот как выглядят мои кнопки:

Вот как мойкнопки меняются после того, как я изменил высоту кнопки на 46px и размер шрифта на 9px.

Вот изображение кнопок с текстом div и изображением divс границами:

Answer 1

просто установите ширину и установите высоту автоматически, потому что во многих случаях загрузчик принимает высоту как авто с определением с помощью

или

в процентах, шкала vh для высоты для отзывчивости.

Answer 2

Изображение реагирует на ширину, а не на высоту.Так как вы уменьшаете высоту кнопки, так как ширина не уменьшается, также и высота изображения.

Вам нужно добавить код, чтобы он реагировал на высоту.

Это один из способов, который работает в некоторых случаях.Это, вероятно, не лучший способ.Если вы установите высоту в контейнере изображения и установите максимальную высоту в img

.span-img {
    height: 100%;

    /* optional for right align */
    display: flex; 
    justify-content: flex-end;

}

.img-fluid {
    max-height: 100%;
}

, это также сделает изображение чувствительным к высоте.

Посмотрите его в действии с помощью начальной загрузки

https://codepen.io/arthurrandom/pen/wRwMvw

Дополнительные настройки flex на .span-img предназначены для жесткого выравнивания вправо и не нужны дляотзывчивое изображение высоты.