Question

帮助，

我注意到一个很酷的方式，媒体寺庙.net处理他们的响应式主页与容器居中的内容，但有两个部分，当你向下滚动图像的宽度超过容器。我无法在正在进行的网站上复制它。

HTML

    <!-- start features -->
<div class="features-wrapper">
    <div class="features-container">

            <!-- Lazy Features Plan Row -->
            <div class="row-fluid">

                <div class="span6">

                    <div class="features">
                    <h3>INCLUDED FEATURES</h3>
                        <p>
                            <strong>Yearly Email Reminders</strong><br>

                        </p>

                     </div>

                </div> 

                <div class="span6">

                    <div class="lazypic">
                        <img src="http://messtudios.com/memorial/images/bg-middle-image.jpg" alt="" />
                    </div>

                </div>      

            </div><!-- end Lazy Features Plan Row -->
    </div>
</div><!-- end features -->

CSS

    .features-wrapper {
    position:relative;
    background-color:#202121;
}
.features-container {
    width:100%;
    max-width:1150px;
    margin:0 auto;
    position:relative;
    padding:0px 0px;
}
.features {
    padding:0px 20px;
}
.features h3{
    padding:60px 0px 30px 0px; 
    color:#FFF;
    font-size:28px;
    margin-bottom:20px;
}
.features p {
    color:#666;
    line-height:22px;
    font-size:16px;
    margin-bottom:20px;
    padding-bottom:30px;
}
.features strong{
    font-weight:bold;
    color:#FFF;
    text-transform:uppercase;
}


.lazypic {
}
.lazypic img {
    width: 100%;
    width: auto\9;
    height: auto;
    vertical-align: middle;
    border: 0;
}

我需要一个插件吗？或者你可以用css吗？

提前致谢。（我正在使用bootstrap） -O

Answer 1

你需要将max-width: 800px关闭.features-container，否则它不会超过800px，这将强制所有子元素也最多为800px。如果您需要将文本保留在原位，则必须向该特定div添加样式（填充，宽度等）。

<强> DEMO

响应式图像类似于媒体寺主页

1 个答案: