Question

我正在尝试将图像放在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>

CSS

 /* Overlay text */
    .module {
        /*background-color: #abc;*/
        background-attachment: fixed;
        /*width: 400px;*/
        height: 300px;
        position: relative;
        overflow: hidden;
    }

        .module > header {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px 10px;
            background: inherit;
            background-attachment: fixed;
            overflow: hidden;
        }

            .module > header::before {
                content: "";
                position: absolute;
                top: -20px;
                left: 0;
                width: 200%;
                height: 200%;
                background: inherit;
                background-attachment: fixed;
                -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;
                color: white;
                position: relative;
                z-index: 1;
            }

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

图片

Answer 1

您需要删除background-attachment: fixed并按如下方式实施background-size。这是demo。

.module{
    background-size: 100% 100%;
    /* other css */
}

Answer 2

我知道这已经回答了，但你可能更喜欢这个解决方案：

Demo

它允许缩放图像但不拉伸图像，因为这通常是不希望的。

如果图片太大，您可以随时添加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>

<强> CSS

 /* 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;
            }

Answer 3

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

Answer 4

尝试

<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>

Answer 5

你应该设置背景大小来掩盖...

.img-responsive{
    background-size: cover
}

Answer 6

看起来你在这里使用的是背景图片。尝试在模块类中将background-size设置为“contains”或“cover”。请注意，旧版Internet Explorer不支持后台大小。

图像不适合DIV内部

6 个答案: