个人中心
gpt4 book ai didi

html - CSS:带有图像的菜单中宽度和高度的百分比大小

转载 作者：行者123 更新时间：2023-11-28 18:57:53 24 4
gpt4 key购买 nike

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

谢谢!

最佳答案

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

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

IE < 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 我可以说得够多了。 (这是他的书的摘录。)

关于html - CSS:带有图像的菜单中宽度和高度的百分比大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7211399/

24 4 0
文章推荐： css - 使用 AlloyUI 在