html - 如何使 2 个标题块响应和也在图片前面

Question

我想制作响应式 2 标题和段落标签，问题是背景

是一个图像，所以那也应该是响应式的？如果我在里面放一张图片，也许herency就是要走的路

我试过修改它，但没有运气，我知道用百分比制作 widgt 和 height 可以解决响应性问题，但是如何做到这一点

<header id="wrapper">
    <div class="container clearfix">
         <h1 id="logo" class="alignleft"> <a href="index.html"></a> </h1>

        <div id="head-two"> <a href="http://www.twitter.com/"><img src="http://poledancescool.com/images/twitterlogo.png"  class="rollOut" width="55" height="55" alt="" style="" /></a>
    <a href="http://www.facebook.com/"><img src="http://poledancescool.com/images/facebooklogo2.png" class="rollOut"  width="55" height="55" alt="" /></a>

        </div>
        <br/>
        <div style="justify;" class="fadeInDown">
                <h1>some slogan to response screen size...</h1>

            <br />
                <h3>        yes it is!</h3>

        </div>
    </div>
</header>
<div class="section ancor">
    <div class="first-heading"></div>
</div>
<div id="primary">
    <div id="left">
        <div id="object1" align='justify'>
            <br/>
            <br/>
            <p>Bla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla BlaBla Bla Bla</p>
        </div>
    </div>
    <div id="right">
        <div id="object3">
<b><h2>title</h2></b>

            <img class="align-right" alt="" src="images/poledance/dance5.jpg" class="fadeInDown" style=" width=82%; height=82%; " />
        </div>
    </div>
</div>

所以这看起来像

我想反应灵敏，看起来像：

但我目前得到：

结果可以在这里看到

增加响应能力的最佳方法是什么？ 请看一下小提琴

我可以做什么来响应灰色矩形？

Answer 1

编辑过的小提琴，刚刚评论了#left，#right magin & padding。请检查。