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;
}