Question

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

首先，这是我的网站：“Narnia Greenville”。

问题是：时间线（名为thermometer.png）偏离中心，虽然我已经按照这里的所有选项：“http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/”，以及其他几个站点。另外，如果你重新调整窗口的大小，它似乎在某一点从右向左跳跃是没有明显原因的。我无法理解，上次我尝试这样的网站（我失败了）我遇到了同样的问题。我确定问题应该是盯着我（可能会嘲笑我），但我不能在我的生活中看到它。目标是让“thermometer.png”在页面上水平和垂直居中，并在所有其他图像的顶部。

下一篇：图像太大了！并且永远加载，所以如果你在有限的互联网连接上，我建议转向其他人的问题。我正在努力。我相信你可以说，我对大部分内容都是新手。（我一直在为我的大部分有限的网页设计经验“重建”wordpress主题，而且它都没有包含这种东西。它只是有用...... LoL。）所以无论如何，虽然不是一个特定的问题，如果你感觉就像记录你如何减少图像加载时间一样，请随意。

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

Answer 1

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

Answer 2

哇噢!!!非常感谢@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。）到目前为止一切顺利，再次感谢你的帮助！

Answer 3

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

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

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

还有其他问题。该图像宽度为3696px（2772px @ 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;
}

中心不是响应式站点中心

3 个答案: