将图像放在具有响应宽度和高度的另一个图像的中央

Question

如何将一张图片放在另一张图片的中央？我尝试了很多类似问题的答案，但 none 对我有用。

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

it MUST be RESPONSIVE(so the size changes automatically when different screen size devices access the web page.)

The heart and ring should remain the same position to each other when user resize his or her screen(or web page window size etc.)

我正在尝试用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

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

所以，我的想法是使用百分比填充、边距等...我已经用百分比填充替换了固定的 width/height 定义，这使得圆响应。看看你是否可以为心脏做同样的事情（我认为在这里使用图像可能会节省你很多时间）。

#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>

和fiddle：http://jsfiddle.net/fzgd6cv8/

如果你对心脏做同样的事情有困难，请告诉我。

更新

这是我对心脏的尝试，可能需要一些数字调整：

#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/

Answer 2

好吧，这是我为满足问题的要求所做的尝试——这不仅是将 image/element 置于另一个之上，而且是以响应的方式实现它。

要点

在底部填充上使用百分比值使元素的高度符合其宽度¹.
在 top、right、left、bottom 偏移量以及 width 和 height 属性上使用百分比值².
在 border-radius 上使用较高的像素值而不是百分比 — 例如 1000px。
第四个...好吧，最后一步是 trial and error!

Example on 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>

¹ _{查看 this topic.} 的 Responsive Container 部分

² _{为了找到精确的值，我们可以 position/size 绝对长度的东西——比如 px——然后测量事物之间的关系。}

将图像放在具有响应宽度和高度的另一个图像的中央

Placing an image centrally over another image with responsive width and height

html

css

responsive-design

css-shapes

更新

要点