我给我的图像添加了“img-fluid”类，但它不适合屏幕答案

【问题标题】：I gave class "img-fluid" to my image but it doesn’t fit the screen我给我的图像添加了“img-fluid”类，但它不适合屏幕
【发布时间】：2022-02-05 19:40:57
【问题描述】：

我在 Bootstrap 中提供了我的图像类“img-fluid”，但它不适合我的网页我该怎么办？

    <img src="images\406201.jpg" class="img-fluid" alt="...">
    <div style="margin-top: 0px ;margin-left: 12px; width: 98.4%;" class="footer bg-dark text-light p-5">
        <h3 style="text-align: center;">follow Us</h3>
        <div class="d-flex justify-content-center flex-wrap">
            <a href="#"><img style="width: 65px; margin: 2px;border-radius: 5px;" src="images/facebook-logo.png"
                    class="bg-light" alt="..."></a>
            <a href="#"><img style="width: 65px; margin: 2px;border-radius: 5px;" src="images\twitter-logo.png"
                    class="bg-light" alt="..."></a>
            <a href="#"><img style="width: 65px; margin: 2px;border-radius: 5px;"
                    src="images\instagram-logo-png-transparent-0.png" class="bg-light" alt=""></a>
            <a href="#"><img style="width: 65px; margin: 2px;border-radius: 5px;"
                    src="images\telegram-logo-png-0.png" class="bg-light" alt=""></a>
        </div>
        <h4 style="text-align: center; margin-top: 15px;">Powered by Marvel Studious</h4>
    </div>

当我给它 style="width=100%" 时，它可以工作，但问题是它不需要 CSS。

【问题讨论】：

放一个更完整的代码。 Bootstrap 类高度依赖于它们的父类
检查元素 - 使用 CSS 规则。当你无法修复它时，请解释：1：你尝试了什么，2：需要什么，3：它实际上做了什么
如果你想适合你的形象，请检查this。

标签： javascript html css twitter-bootstrap bootstrap-5

【解决方案1】：

我不确定这是否是问题所在，但img-fluid 将图像设置为可能的最大尺寸div 而不是屏幕，因此请确保您没有将图像放在限制其大小的东西中

【讨论】：

是的，我没有将 img 标签放在 div 之类的其他标签中您可以清楚地看到我的代码，我的第一张图片正好适合我的网页屏幕，但这张没有
对不起，您在上面发布的代码对我有用（至少我认为这是您想要的）image（忽略我使用的随机图像）
好的，谢谢帮助！

【解决方案2】：

将图像放入一个具有“container-fluid”类的 div 中。

<style>
    .width-complete{
        width:100%
    }
</style>
<div class="container-fluid">
    <img src="images\406201.jpg" class="width-complete" alt="...">
</div>

【讨论】：