以响应的宽度和高度将图像居中放置在另一个图像上

Question

如何将图像居中放置在另一个图像上？ 我尝试了许多类似问题的答案，但没有一个对我有用。

基本上我需要将2张图片变成1张

1. 它必须是响应性的（因此，当不同屏幕尺寸的设备访问网页时，尺寸会自动更改。）

2. 用户调整屏幕大小（或网页窗口大小等）时，心脏和环的位置应彼此保持相同

我正在尝试使用css绘制圆环和心脏，但是如果您确实需要图片替换圆环或心脏，也可以。

这是我的代码，我已经工作了几个小时了，但是还没有好运。 http://jsfiddle.net/4u6tfacw/

谢谢。

这是我的代码

<div id="logo">
    <div id="heart-container">
    </div>
    <div id="heart">
    </div>
</div>

#logo {
    width: 50%;
    height: 50%;
}

#heart {
    display: block;
    position: absolute;
    top: 70px;
    left: 30px;
    z-index: 1;
    width: 70%;
    height: 70%;

}

#heart-container {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    /*bottom:0;
        right:0;*/
    z-index: 1;
    width: 70%;
    height: 70%;
}

#heart-container {
    border-radius: 50%;
    behavior: url(PIE.htc);

    width: 220px;
    height: 220px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
}

#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 90px;
    top: 0;
    width: 90px;
    height: 130px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

#heart:after {
    left: 0;
    box-shadow: 10px 10px 100px #6d0019;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

Answer 1

好吧，这是我在满足这个问题的要求的尝试，这不仅是关于将图像/元素放在另一个图像/元素上，而且是关于以响应方式实现这一要求。

关键点

1. 在底部填充上使用百分比值以使元素的高度尊重其宽度¹ 。
2. 在top ， right ， left ， bottom偏移量以及width和height属性上使用百分比值² 。
3. 在border-radius上使用较高的像素值代替百分比，例如1000px 。
4. 第四个……好吧，最后一步是反复试验 ！

JSFiddle上的示例 。

 *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { margin: 0; height: 100%; width: 100%; } #logo { width: 50%; /* height: 50%; */ position: relative; } #logo:after { content: ""; display: block; padding-bottom: 70%; } #heart { position: absolute; top: 26%; left: 35%; z-index: 1; width: 70%; height: 100%; } #heart-container { position: absolute; top: 0; left: 0; z-index: 1; width: 70%; /* height: 70%; */ border-radius: 50%; behavior: url(PIE.htc); background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 32px Arial, sans-serif; } #heart-container:after { content: ""; display: block; padding-bottom: 100%; } #heart:before, #heart:after { position: absolute; content: ""; left: 0; top: 0; width: 39.130434782608695652173913043478%; height: 56.521739130434782608695652173913%; background: red; -moz-border-radius: 1000px 1000px 0 0; border-radius: 1000px 1000px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart:after { left: -38.9%; box-shadow: 10px 10px 100px #6d0019; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } 

 <div id="logo"> <div id="heart-container"></div> <div id="heart"></div> </div> 

---

^1。 _{查看本主题的“ 响应式容器”部分。}

² _{要找到确切的值，我们可以按绝对长度（例如px定位/调整大小，然后仅相对于彼此测量大小。}

Answer 2

如果要响应，则必须放弃所有固定（像素）单位并使用百分比，除非您计划根据屏幕尺寸有多个版本，在这种情况下可以使用媒体查询。

因此，我们的想法是将百分比用于填充，边距等...，而我已经将百分比固定的宽度/高度定义替换为百分比填充，这使圆具有响应性。 看看您是否可以对心脏做同样的事情（我认为使用图像可能会在这里节省很多时间）。

 #logo { width: 50%; height: 50%; position: relative; } #heart { display: block; position: absolute; margin: 18% 14%; z-index: 1; width: 70%; height: 70%; } #heart-container { display: block; position: absolute; top: 0; left: 0; /*bottom:0; right:0;*/ z-index: 1; padding: 50%; } #heart-container { border-radius: 50%; behavior: url(PIE.htc); padding: 50%; background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 32px Arial, sans-serif; } #heart:before, #heart:after { position: absolute; content: ""; left: 90px; top: 0; width: 90px; height: 130px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart:after { left: 0; box-shadow: 10px 10px 100px #6d0019; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } 

 <div id="logo"> <div id="heart-container"> </div> <div id="heart"> </div> </div> 

和小提琴： http : //jsfiddle.net/fzgd6cv8/

如果您在为心脏做同样的事情时遇到麻烦，请告诉我。

---

UPDATE

这是我为之努力的尝试，可能需要一些数字调整：

 #logo { width: 50%; height: 50%; position: relative; } #heart { display: block; position: absolute; margin: 20% 14% 0 9%; z-index: 1; width: 70%; height: 70%; } #heart-container { display: block; position: absolute; top: 0; left: 0; /*bottom:0; right:0;*/ z-index: 1; padding: 50%; } #heart-container { border-radius: 50%; behavior: url(PIE.htc); padding: 50%; background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 32px Arial, sans-serif; } #heart:before, #heart:after { position: absolute; content: ""; left: 60%; top: 0; width: 60%; padding-top: 100%; background: red; -moz-border-radius: 150% 150% 0 0; border-radius: 150% 150% 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart:after { left: 0; box-shadow: 10px 10px 100px #6d0019; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } 

 <div id="logo"> <div id="heart-container"> </div> <div id="heart"></div> </div> 

http://jsfiddle.net/fzgd6cv8/2/