无论窗口大小如何，保持 div 叠加相对于背景图像

Question

我想用background-size: cover.

这里的问题是如何将覆盖 div 保持在相对于背景图像的相同位置，而不管窗口的大小如何？

这是一个可以玩的小提琴：http : //jsfiddle.net/resting/2yr0b6v7/

所以我想把这个词eye放在猫的眼睛上，不管窗口大小。

CSS 或 JS 解决方案都受欢迎。

Answer 1

编辑：添加了 js 替代方案

我确信这可以用 css 完成并几乎放弃了，但后来我想起了新的（ish）css 单位vh 和 vw ....

提琴手

CSS

html, body{
    height: 100%;
    width: 100%;
}
.cat {
    height: 100%;
    width: 100%;
    position: relative;
    background:url(http://placekitten.com/g/800/400) no-repeat center center / cover;
}
.place-on-eye {
    position: absolute;
    color: #fff;
    margin:0;
}

@media (min-aspect-ratio: 2/1) {    
    .place-on-eye {
        bottom: 50%;
        left: 46.875%;
        margin-bottom: 1.25vw;
    }
}

@media (max-aspect-ratio: 2/1) {   
    .place-on-eye {
        bottom: 52.5%;
        left: 50%;
        margin-left: -6.25vh;
    }
}

解释

所以左眼大约在 375, 190 处，由于图像居中，我们还想知道它离中心有多远，所以 25, 10。 由于图像被覆盖，图像的大小会发生变化基于视口的纵横比是大于还是小于背景图像的纵横比。知道了这一点，我们可以使用媒体查询来定位文本。

图片是2:1，所以当视口宽高比>2:1时，我们知道图片的宽度就是视口的宽度，所以左边的位置<p>应该总是46.867%（375/800） . 底部位置将更加困难，因为图像超出了视口顶部和底部。我们知道图像是居中的，所以首先将 移动<p>到中间，然后将其向上推图像高度的 2.5% (10/400)。我们不知道图像的高度，但我们知道图像的纵横比，并且图像的宽度等于视口的宽度，因此 2.5% 的高度 = 1.25% 的宽度。所以我们必须将底部向上移动 1.25% 的宽度，我们可以通过设置margin-bottom:1.25vw. 顺便说一句，我们可以在没有vw在这种情况下，因为填充始终是相对于宽度计算的，所以我们可以设置padding-bottom:1.25%，但是在下一种情况下，您必须相对于高度定位左侧，这将不起作用。

纵横比 < 2:1 的情况类似。图像的高度是视口的高度，所以底部位置应始终为 52.5% (210/400)，左侧的计算方法与上面类似。将其移到中心，然后将其后退图像宽度的 3.125% (25/800)，这等于图像高度的 6.25%，也就是视口高度，所以margin-left:-6.25vh.

希望这是正确的，并帮助你！

JS 替代品

提琴手

这是使用 js 的替代方案。它使用了一些像 forEach 和 bind 这样的特性，这可能会导致问题，这取决于你需要它在多大的浏览器上工作，但它们很容易替换。使用 js 可以直接计算 bg 图像的缩放尺寸，这使定位更容易。不是最优雅的代码，但这里有：

//elem:     element that has the bg image
//features: array of features to mark on the image
//bgWidth:  intrinsic width of background image
//bgHeight: intrinsic height of background image
function FeatureImage(elem, features, bgWidth, bgHeight) {
    this.ratio = bgWidth / bgHeight; //aspect ratio of bg image
    this.element = elem;
    this.features = features;
    var feature, p;
    for (var i = 0; i < features.length; i++) {
        feature = features[i];
        feature.left = feature.x / bgWidth; //percent from the left edge of bg image the feature resides
        feature.bottom = (bgHeight - feature.y) / bgHeight; //percent from bottom edge of bg image that feature resides               
        feature.p = this.createMarker(feature.name);
    }
    window.addEventListener("resize", this.setFeaturePositions.bind(this));
    this.setFeaturePositions(); //initialize the <p> positions
}

FeatureImage.prototype.createMarker = function(name) {
    var p = document.createElement("p"); //the <p> that acts as the feature marker
    p.className = "featureTag";
    p.innerHTML = name;
    this.element.appendChild(p);
    return p
}

FeatureImage.prototype.setFeaturePositions = function () {
    var eratio = this.element.clientWidth / this.element.clientHeight; //calc the current container aspect ratio
    if (eratio > this.ratio) { // width of scaled bg image is equal to width of container
        this.scaledHeight = this.element.clientWidth / this.ratio; // pre calc the scaled height of bg image
        this.scaledDY = (this.scaledHeight - this.element.clientHeight) / 2; // pre calc the amount of the image that is outside the bottom of the container
        this.features.forEach(this.setWide, this); // set the position of each feature marker
    }
    else { // height of scaled bg image is equal to height of container
        this.scaledWidth = this.element.clientHeight * this.ratio; // pre calc the scaled width of bg image
        this.scaledDX = (this.scaledWidth - this.element.clientWidth) / 2; // pre calc the amount of the image that is outside the left of the container
        this.features.forEach(this.setTall, this); // set the position of each feature marker
    }
}

FeatureImage.prototype.setWide = function (feature) {
    feature.p.style.left = feature.left * this.element.clientWidth + "px";
    feature.p.style.bottom = this.scaledHeight * feature.bottom - this.scaledDY + "px"; // calc the pixels above the bottom edge of the image - the amount below the container
}

FeatureImage.prototype.setTall = function (feature) {
    feature.p.style.bottom = feature.bottom * this.element.clientHeight + "px";
    feature.p.style.left = this.scaledWidth * feature.left - this.scaledDX + "px"; // calc the pixels to the right of the left edge of image - the amount left of the container
}

var features = [
    {
        x: 375,
        y: 190,
        name: "right eye"
    },
    {
        x: 495,
        y: 175,
        name: "left eye"
    },
    {
        x: 445,
        y: 255,
        name: "nose"
    },
    {
        x: 260,
        y: 45,
        name: "right ear"
    },
    {
        x: 540,
        y: 20,
        name: "left ear"
    }
];

var x = new FeatureImage(document.getElementsByClassName("cat")[0], features, 800, 400);