Question

我的网站应该适合移动访问者，因此应该扩展到用户屏幕的尺寸，包括宽度和高度。此外，我有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>

谢谢！

Answer 1

不要使用宽度和宽度高度，只需使用max-width：

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

IE＆lt; 8缩放图像并获得高质量缩放，您需要使用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（这也是他的书的优秀摘录。）

Answer 2

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

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

html, body { height: 100%; }

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

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

CSS：带图像的菜单中宽度和高度的％大小

3 个答案: