0

我在使用具有浮动背景图像（绝对定位）的页面时遇到了一些问题，其中图像是通过 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 替换图像源，然后动态调整容器（背景）的大小以填充新内容。有最小界限，所以它总是有一个大小。

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

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

示例： top: 187.5px和边距顶部：-389.5px。看起来margin-top 使用img-source 分辨率并且top使用了一些我无法弄清楚的东西——我假设min-height + 页面中的偏移量？

这里的任何帮助将不胜感激，这是设计的一个相当大的部分，我希望它比它更好。

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

4

1 回答 1

0

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

/*Hack of a vector similar to 50%*/
margin-top: calc(-50% * 0.75);
top: 50%;
于 2013-10-03T20:30:36.020 回答