Question

我正在使用一些图像的页脚中工作，但问题是我无法使图像响应。

如果任何人都可以提出想法或几乎没有帮助将不胜感激，我在前端的经验不足。我使用引导程序。

这是我到目前为止尝试过的。

HTML：

<div className="clearfix" />
    <footer className="footer">
        <div className="container-fluid">
            <div className="text-left">
                <img src="https://tssg.org/wp-content/uploads/2018/01/Irelands_EU_ESIF_2014_2020_en.png"
                     alt="European Structural and Investment Funds" />
                <img src="https://tssg.org/wp-content/uploads/2018/01/european-union-logo.png"
                     alt="European Regional Development Fund" />
                <img src="https://tssg.org/wp-content/uploads/2018/01/HEA_Grey.png"
                     alt="Higher Education Authority Ireland" />
                <img src="https://tssg.org/wp-content/uploads/2018/01/EI.png"
                     alt="Enterprise Ireland Logo" />
                <img src="https://tssg.org/wp-content/uploads/2018/01/sfi-logo.png"
                     alt="Science Foundation Ireland Logo" />
                <span className="text-right">Copyright © 2019</span>
            </div>
        </div>
    </footer>
</div>

CSS：

.footer {
    bottom: 0px;
    color: #272727;
    text-align: center;
    padding: 12px 30px;
    position: absolute;
    right: 0;
    left: 200px;
    //background-color: #f9f9f9;
    border-top: 1px solid rgb(223, 223, 255);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background-color: #ede9e9;
    // background:#33444a;ede9e9
}

.footer img {
    border: none !important;
    width: auto !important;
    max-height: 28px !important;
    cursor: pointer;
}

    .footer img:not(:last-child) {
    margin-right: 50px ;
}

Answer 1

事物的结合：

您应该在HTML中使用class="classes here"而不是className="classes here"。
在CSS中将height:auto和max-width:100%添加到.footer img类中，如下所示：

.footer img { border: none !important; width: auto !important; height:auto; max-width:100%; max-height: 28px !important; cursor: pointer; }

那应该使图像具有响应性。

Answer 2

为BootStrap 3添加类“ img-sensitive”，为BootStrap 4添加类“ img-fluid”。
示例：

<img src="https://tssg.org/wp-content/uploads/2018/01/sfi-logo.png" alt="Science Foundation Ireland Logo" class="img-responsive" />

希望这会有所帮助。

如何使页脚响应图像

2 个答案: