CSS 响应式布局，元素流动和固定

Question

我需要一点帮助，我正在为 Wordpress 开发一个自定义主题：http://bjorn.flabifitness.hu/

我需要一个固定的页眉、页脚、菜单区域。以及带有页面内容（图像）的流畅内容区域。

在浏览器窗口大小变化期间，只需将内容更改/调整为view-size，不带滚动条，如果图​​片大于浏览器窗口或显示器，则应调整为浏览器窗口。 （流体）

页眉、页脚和菜单（垂直位置）应位于同一位置。 （固定）

这是我现在的 CSS 代码：（主要：所有页面、内部页眉、容器（侧边栏、内容）、页脚）

#main {
    position: absolute;
    background-color:#434343;
    z-index:0;
    display: block;
    opacity: 0;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    text-rendering: optimizeLegibility;
}
#header {
    background: #1d1d1d;
    margin: 0;
    padding-top: 15px;
    padding-left: 35px;
    padding-bottom: 13px;
    min-width: 100%;
    margin:0px auto;
}
#footer {
    clear: both;
    min-width: 100%;
}
#container {
    height: auto;
    overflow: hidden;
}

#sidebar {
    width: 242px;
    float: left;
    background: #434343;
    min-height: 92%;
}

#content {
    float: none;
    background: #434343;
    width: auto;
    overflow: hidden;
}

Answer 1

您可以像这样使用 CSS 流畅地缩放图像：

img {
  width: 100%;
  height: auto;
}