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

Question

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

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

浏览器窗口大小变化时，只需要改变/调整内容为view-size，不带滚动条，如果图​​片大于浏览器窗口，或者显示器，则调整为browser-window大小. （体液）

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

这是我现在的 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;
}