响应图像定位在图像上 [英] Responsive images positioned over image

问题描述

我已经设置了一个jsfiddle我想做什么：

I have setup a jsfiddle of what i'm trying to do:

http://jsfiddle.net/MgcDU/3936/

#counter {
    position: relative;
}
#over {
    position:absolute;
    left:33%;
    top:43%;
}

猫的图像是我的背景图片，

The image of the cat is my background image which resizes as the browser resizes.

球图像绝对位于猫的上方。

The ball image is absolutely positioned over the cat. How can I get the ball image to resize and stay in the same position as it is my default?

推荐答案

设置您的 #counter div到 display：inline; 或添加一个包含 display：inline; 并将 #over 的 max-width 设置为例如 10％ （ DEMO ）：

Set your #counter div to display: inline; or add a wrapper with display: inline; and set the max-width of #over to for example 10% (DEMO):

#counter {
    position: relative;
    display: inline;
}
#over {
    position:absolute;
    left:33%;
    top:43%;
    max-width: 10%;
}

这篇关于响应图像定位在图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！