Html 图像不适合DIV内部

我试图在div中放置一个图像。我的问题是它没有将图像安装到div中，图像在div中，它只是不适合div。它像图像的一部分一样显示，因为图像比div大。有人能帮我使它适合div中的整个图像而不成比例吗？我有以下资料：

标记

 <div class="col-lg-2 col-md-4 col-sm-6 newClass">
        <div class="module img-responsive" style="background-image: url(Images/my_image.jpg);">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Text
                </h1>
                <h2 style="font-size: 13px; text-align: center;">Some more text
                </h2>
            </header>
        </div>
 </div>

图像

---

您有另一个名为newClass的类，但您没有为它提供标记\u 我只是想知道它是否有可能影响.module类结果的相关参数？

试试看

<div class="col-lg-2 col-md-4 col-sm-6 newClass">
        <div class="module img-responsive" style="background-image: url(Images/my_image.jpg);background-size:cover;">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Text
                </h1>
                <h2 style="font-size: 13px; text-align: center;">Some more text
                </h2>
            </header>
        </div>
 </div>

正文
更多的文字

您应该设置背景大小以覆盖ie

.img-responsive{
    background-size: cover
}

---

看起来您正在使用背景图像。尝试在模块类中将背景大小设置为“包含”或“覆盖”。请注意，旧版本的Internet Explorer不支持背景大小。

您需要删除

背景附件：已修复
，并实现
背景大小，如下所示。这是我的建议

我知道这已经得到了回答，但您可能更喜欢此解决方案：


它允许缩放图像，但不拉伸图像，因为这通常是不需要的

如果图像变得太大，您可以随时添加
max width
，以防止出现这种情况

HTML

<div class="col-lg-2 col-md-4 col-sm-6 newClass">
    <div class="module img-responsive" style="background-image: url('http://i.stack.imgur.com/NuEZ2.jpg');">
        <header>
            <h1 style="font-size: 20px; text-align: center;">Text
            </h1>
            <h2 style="font-size: 13px; text-align: center;">Some more text
            </h2>
        </header>
        <img src="http://i.stack.imgur.com/NuEZ2.jpg" style="visibility:hidden; width:100%; display:inherit"/>
    </div>
</div>

确保删除
背景附件：已修复也是。我添加了一个演示。注意：这比公认的答案更灵活，后者将图像实际放置在div中，并阻止所有其他内容。这也给了你一个精确的拉伸。你已经在div中放置了两次图像：一次作为背景，另一次物理定位在div中。这有点像黑客。如果他想在标题上方的div中添加其他内容，该怎么办？它还强制div采用图像的形状，这意味着在多个部分使用之前，所有图像的大小必须相同。是的，这是一种获取图像高度的技巧。如果OP希望标题上方的div中有更多内容，我会在其周围添加一个换行div，并将当前标题规则应用于该div。一些CSS必须在ofc中更改。
.module{
    background-size: 100% 100%;
    /* other css */
}

<div class="col-lg-2 col-md-4 col-sm-6 newClass">
    <div class="module img-responsive" style="background-image: url('http://i.stack.imgur.com/NuEZ2.jpg');">
        <header>
            <h1 style="font-size: 20px; text-align: center;">Text
            </h1>
            <h2 style="font-size: 13px; text-align: center;">Some more text
            </h2>
        </header>
        <img src="http://i.stack.imgur.com/NuEZ2.jpg" style="visibility:hidden; width:100%; display:inherit"/>
    </div>
</div>

 /* Overlay text */
    .module {
        background-size:cover;
        background-repeat: no-repeat;
        position: relative;
        overflow: hidden;
    }

        .module > header {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: inherit;
            background-position: bottom; 
            overflow: hidden;
        }

            .module > header::before {
                content: "";
                position: absolute;
                left: 0;
                width: 100%;
                height: 100%;
                background: inherit;
                background-size: cover;
                -webkit-filter: blur(4px);
                filter: blur(4px);
            }

            .module > header::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.25);
            }

            .module > header > h1 {
                margin: 0;
                padding: 10px 10px;
                color: white;
                position: relative;
                z-index: 1;
            }

            .module > header > h2 {
                margin: 0;
                padding: 10px 10px;
                color: white;
                position: relative;
                z-index: 1;
            }