带侧导航和英雄形象的响应式标题？

Question

我正在处理一个包含标题和导航的项目。像这样：

我在布局上遇到了困难。我可以把它放在一起很好，但我对响应性感到不稳定（这是一个字吗？）。现在，伪代码就像：

<div class="container" style="width: 960px; overflow:hidden;">
    <div class="nav">
        <ul><li>...</li></ul>
    </div>
    <div class="image">
        <img src="..." />
    </div>
</div>

我还在考虑为图像使用背景图像，然后创建严格的断点，但必须有更好的方法。

我希望导航能够反映出图像的新高度/宽度，具体取决于视口的宽度。当它太薄而无法实现这一点时，它将变为适合移动设备的视图（这对我来说没问题）。