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

问题描述 投票：0回答：2

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

基本上我需要将 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%;
}
html css responsive-design css-shapes
2个回答
3
投票

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

要点

  1. 在底部填充上使用百分比值使元素的高度尊重其宽度1。
  2. 在 
    top
    、
    right
    、
    left
    、
    bottom
    偏移以及 
    width
    和 
    height
    属性2 上使用百分比值。
  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 查看此主题的响应式容器部分。

2 为了找到精确值，我们可以以绝对长度定位/调整事物的大小 - 就像 

px
- 然后只测量事物之间的相对关系。

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/

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

更新

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.