html - 类似于 media temple 主页的响应图像

Question

帮助，

我注意到 media temple .net 使用以容器为中心的内容处理其响应式主页的一种很酷的方式，但是当您向下滚动时有两个部分，图像全宽超过容器。我无法在我正在处理的网站上复制它。

这是一个jfiddle http://jsfiddle.net/uQY6R/

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