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和带有边框的image div的按钮的图像：

Answer 1

图像响应宽度，而不是高度。因此，当您减小按钮高度时，由于宽度不会减小，因此图像高度也不会减小。

您需要添加一些代码以使其响应高度。

这是在某些情况下有效的一种方法。它可能不是最好的方法。如果您在图片容器上设置了高度，并在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

.span-img上的额外柔韧性设置是要向右硬对齐，而不是响应高度图像所必需的。

Answer 2

只需将宽度和高度设置为auto即可，在许多情况下，引导程序会将高度设为

为auto

或

使用百分比，vh标度表示高度，以进行响应。

引导图像未根据父级调整高度

2 个答案: