Question

我在使用具有浮动背景图像（绝对定位）的页面时遇到一些问题，其中图像通过javascript动态更改。基本上这是一个改变投资组合背后的大画廊：

我有一段标记，如下所示：

<div class="content">
  <div class="content-container">
    <div class="content-image">
      <img id="galleryTarget" src="../images/main/source.jpg" class="image-resize" alt="background image"/>
    </div> 
    ...etc...

以下是相关的CSS类：

.image-resize {
    position: absolute;
    min-height: 750px;
    min-width: 1000px;
    width: 100%;
    left: 0;
    text-align: left;
    vertical-align: middle;
    margin-top: -25%;
    top: 25%;
}

.content-image {
    position: absolute;
    top: 0;
    left: 200px;
    width: 100%;
    min-height: 750px;
    max-height: 750px;
    min-width:1000px;
    overflow:visible;
    opacity: 0.5;
    z-index: 1;
}

.content-container {
    position: relative;
    min-height: 750px;
}

.content {
    position: absolute;
    top: 0;
    width: 100%;
    max-height: 750px;
    overflow: hidden;
    background: purple;
    z-index: -5;    
}

这一切都是绝对定位的，这样我就可以用Javascript换出图像源，然后动态调整容器（背景）的大小以填充新内容。有最小界限所以它总是有一个大小。

我要做的是将此图像固定到CENTER点，以便在调整图像大小时显示图像的有趣部分（很少显示左上角）。

在chrome中的检查器中，我看到top和margin-top永远不会是相同的值，即使它们具有相同的（百分比）值。我在这里缺少什么？

实施例： top: 187.5px和margin-top：-389.5px。看起来margin-top使用了img-source分辨率而且top使用了我生活中的东西我无法弄清楚 - 我假设min-height +页面中的偏移量？

这里的任何帮助都会受到赞赏，这是设计的一个相当大的部分，我希望它比它更好。

浏览器： Chrome版本：30.0.1599.66 m Android Chrome：30.0.1599.82

Answer 1

这确实解决了chrome中的问题 - 但我想知道为什么它使用1000px作为边距的基线而不是750px的单位。

/*Hack of a vector similar to 50%*/
margin-top: calc(-50% * 0.75);
top: 50%;

CSS margin-top和top不受约束

1 个答案: