-1

如果这些问题中的任何一个（有一个主要问题，然后是另一个不太重要的问题）是绝对的白痴问题，我真的很抱歉，但我必须承认它们让我很难过，所以我非常感谢我能得到的任何帮助。

首先，这是我的网站：“纳尼亚格林维尔”。

问题是这样的：时间线（名为 thermometer.png）偏离中心，尽管我已经遵循了这里的所有选项：“ http://css-tricks.com/snippets/css/absolute-center-vertical-horizo​​ntal- an-image/ "，以及其他几个站点。另外，如果您重新调整窗口大小，它似乎会在某个点无缘无故地从右跳到左。我想不通，最后一次尝试这样的网站（我失败得很惨）我遇到了同样类型的问题。我确信这个问题应该是盯着我的脸（并且可能在嘲笑我），但我一辈子都看不到它。目标是让“thermometer.png”在页面上水平和垂直居中，并位于所有其他图像的顶部。

下一篇：图片很大！并永远加载，所以如果您的互联网连接有限，我建议您继续解决其他人的问题。我正在努力。正如我敢肯定你能说的，我对大部分内容都是新手。（在我有限的网页设计经验的大部分时间里，我一直在“重建”wordpress 主题，但没有一个包含这种东西。它只是工作......哈哈。）所以无论如何，虽然不是一个具体的问题，如果你想记录您如何减少图像加载时间，请随意。

非常感谢任何愿意帮助我的人。再次，如果其中任何一个是愚蠢的问题，我深表歉意。哈哈。

4

3 回答 3

1

呜呼！！！非常感谢@DevlshOne 的帮助！再玩一点，我就明白了！我最终使用的代码是这样的（使用@DevlshOne 代码中所有百分比的变体：http: //jsfiddle.net/devlshone/WASbe/2/）：

.class {
position: fixed;
min-height: auto;
min-width: 100px;
/* Set up proportionate scaling */
width: calc(100% - 30px);
left: calc(50% - 47%);
height: auto;
/* Set up positioning */
top: 40%;
z-index: 9997;

}

我在输入时将它上传到测试站点，它应该在那里停留相当长的时间，以供其他有此问题的人参考。（测试站点在这里：http: //goo.gl/9aXRcf。）到目前为止一切顺利，再次感谢您的帮助！

于 2013-10-03T14:46:00.243 回答
1

如果您从 photoshop 导出，则可以使用http://tinypng.org/和http://www.jpegmini.com/等工具压缩您的图像，请使用“保存为网络和设备”选项。

于 2013-10-03T01:36:04.717 回答
0

如果窗口宽度低于 1024 像素，您的温度计会从右向左跳跃。这就是 CSS 的这一部分：

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  .thermometer {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

尝试将这两个都更改为正确的，看看是否可以解决问题。

还有其他问题。该图像的宽度为 3696 像素（2772 像素 @ 75%）。你需要使用一些 CSS3 数学函数来让这个野兽正确居中。

.thermometer {
  /* Set rules to fill background */
  min-height: auto;
  min-width: 100px;

  /* Set up proportionate scaling */
  width: 75%; // maybe this should be: **width: calc(100% - 1386px);**
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 50%;
  left: 50%; // I don't see a reason for this at all... just let it take up the entire page
  z-index: 9997;
}
于 2013-10-03T01:52:33.157 回答