CSS：带有图像的菜单中宽度和高度的百分比大小答案

【问题标题】：CSS: % sizes in width and height in menus with imagesCSS：带有图像的菜单中宽度和高度的百分比大小
【发布时间】：2011-08-26 23:16:57
【问题描述】：

我有一个适合移动访问者的网站，因此在宽度和高度上都应该缩放到用户屏幕的尺寸。此外，我有 2 个导航菜单（1 个左，1 个右），底部有一些固定信息（如页脚）。所有这些部分都包含应缩放以适应菜单尺寸的图像。具体来说，页面是这样的（默认添加一个太大的随机图片）：

<body>
  <table class="wholepage">

    <tr class="top">

      <td class="left">
        <table>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
        </table>
      </td>

      <td class="middle">Middle content</td>

      <td class="right">
        <table>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
        </table>
      </td>

    </tr>
    <tr class="bottom">

      <table>
        <tr>
          <td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
          <td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
        </tr>
      </table>

    </tr>
  </table>
</body>

使用以下 CSS：

.wholepage {
  width: 100%;
  height: 100%;
}

.wholepage img {
  width: 100%;
  height: 100%;
}

.top {
  height: 80%;
}

.left, .right {
  width: 15%;
}

.middle {
  width: 70%;
}

.bottom {
  height: 20%;
}

这样，页面的宽度可以完美地适应自身，保持在左右之间 15%-70%-15% 的分布。但是，在垂直方向上，所有图像都拒绝缩放。如何让页面适合上下 80%-20% 的分布？

编辑：这是查看它的一种方式，如果您填写 http://www.w3schools.com/css/tryit.asp?filename=trycss_default

<html>
<head>
<style type="text/css">

html, body {
  height: 100%;
}

.wholepage {
  width: 100%;
  height: 100%;
}

.wholepage img {
  width: 100%;
}

.top {
  height: 80%;
}

.left, .right {
  width: 15%;
}

.left {
  position: fixed;
  top: 0px;
  left: 0px;
}

.right {
  position: fixed;
  top: 0px;
  right: 0px;
}

.middle {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.bottom {
  height: 20%;
  position: fixed;
  bottom: 0px;
}


</style>
</head>

<body>
  <div class="wholepage">

    <div class="top">

      <div class="left">
        <table>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
        </table>
      </div>

      <div class="middle">Middle content</div>

      <div class="right">
        <table>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
        </table>
      </div>

    </div>
    <div class="bottom">

      <table>
        <tr>
          <td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
          <td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
        </tr>
      </table>

    </div>
  </div>
</body>

谢谢！

【问题讨论】：

标签： html css layout scaling

【解决方案1】：

不要使用宽度和高度，只使用最大宽度：

.wholepage img {
  max-width: 100%;
}

IE AlphaImageLoader 并将SizingMethod 设置为scale。可能最简单的方法是使用Drew Diller's DD_BelatedPNG library。请注意，使用 AlphaImageLoader 会影响性能。另外，IE6 不支持max-width，所以如果您需要支持 IE6，请在条件注释中使用width: 100%。

另外，关于Ethan Marcotte's A List Apart Article on Responsive Design，我可以说得够多了（这是他的书的节选。）

【讨论】：

max-width 不这样做.. 我现在正在使用 firefox，当我至少有 1 个浏览器工作时移至 IE。我在我的问题中添加了一些希望有用的方法来亲自查看它。

【解决方案2】：

首先；不要使用表格进行样式设置。使用 div，甚至更好的 html5 标签，如 <header> 和 <footer> 等。

为确保使用百分比正确处理高度，您还应将 html 和 body 设置为 100% 高度，例如：

html, body { height: 100%; }

【讨论】：

拍摄点，但将 html/body 高度设置为 100% 仍然不会垂直缩放图像。
尝试给图像一个属性height="100%"和/或css属性img { height: 100%; }。
那是在我发布的 CSS 中：.wholepage img { width: 100%; height: 100%; }
嗯，属性也不行？如果设置bg颜色，这些怎么填充？
它们像预期的那样水平填充（15-70-15），垂直填充整个页面，底部有一个（非常）大的彩色页脚。

【解决方案3】：

我最终破解了它。除非有人知道更好的方法，否则我就是这样做的：

function fixHorizontalDimension(){
  maxHeight = window.innerHeight * [% height desired] * 0.9;
  imgs = document.getElementsByClassName([classname of wrongly sized objects]);
  for(i=0; i<imgs.length; i++){
    imgs[i].style.height = maxHeight;
  }
}

由于该网站仅供个人使用，并且使用移动浏览器，因此此修复程序可以完成工作。调整大小（例如从纵向切换到横向）不起作用。

【讨论】：