Question

我已经在我的英雄形象上放置了个人资料图片div。当我调整窗口大小时，配置文件pic移动。我尝试过固定的，相对的，绝对的...没有用。任何想法 - 谢谢，adolfo - 网站：http://adolfobarreto.atwebpages.com/

HTML：

<div id="heroimage">
    <div class="pulse1"></div>
    <div class="pulse2"></div>
    <div class="profilepicture"></div>
    <div class="module mid">
        <h2>&nbsp;Adolfo Barreto&nbsp;</h2>
        <h4>&nbsp;Web Designer&nbsp;</h4>
    </div>
</div>

的CSS：

    // Hero
html, body, #heroimage{
  width:100%;
  height:80%;
}

#heroimage{   
  background:url('/../assets/img/heroVector.jpg') center center;
  background-size:cover;
}

@import url(http://fonts.googleapis.com/css?family=Roboto:400,900);
.mid h2 {
    background-color: #7A3E48;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  color: white;
  margin: 0;
  position: absolute;
  top: 40%;
  left: 50.5%;
  font-size: 2rem;
  transform: translate(-50%, -50%);
}
.mid h4 {
    background-color: #7A3E48;

  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  color: white;
  margin: 0;
  position: absolute;
  top: 44%;
  left: 50.5%;
  font-size: 1.5rem;
  transform: translate(-50%, -50%);
}

//end hero

// profile picture

.profilepicture {
    position: absolute; 
    width: 180px;
    height: 180px;
    margin: 0px;
    margin-top: 10%;
    margin-left: 44.6%;
    background: url(/../assets/img/AdolfoBarreto.4.jpg) no-repeat;
    background-size: 180px 180px;


    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 3;

    -webkit-box-shadow: 
      0 0 0 10px  rgba(255,255,255,.2),
      0 0 5px 2px rgba(0,0,0,.3),
inset 0 0 0 10px  rgba(0,0,255,.2);
    -moz-box-shadow: 
      0 0 0 10px  rgba(255,255,255,.2),
      0 0 5px 2px rgba(0,0,0,.3),
inset 0 0 0 10px  rgba(0,0,255,.2);
    box-shadow: 
      0 0 0 10px  rgba(255,255,255,.2),
      0 0 5px 2px rgba(0,0,0,.3),
inset 0 0 0 10px  rgba(0,0,255,.2);

    -webkit-border-radius: 999px; 
    -moz-border-radius: 999px;
    border-radius: 999px;
    /* border-radius: 50% has issues on some mobile browsers */
}

.pulse1 {
    position: absolute;  
    width: 200px;
    height: 200px;
    margin-top: 9.5%;
    margin-left: 44%;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 1;
    opacity: 0;
    border: 3px solid rgba(255,255,255,.1);

    -webkit-animation: pulsejg1 4s linear infinite;
    -moz-animation: pulsejg1 4s linear infinite;
    animation: pulsejg1 4s linear infinite;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    -webkit-box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6);
    -moz-box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6);
    box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.pulse2 {
    position: absolute;
    width: 200px;
    height: 200px;
    margin-top: 9.5%;
    margin-left: 44%;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 2;
    opacity: 0;
    border: 1px solid rgba(255,255,255,0);

    -webkit-animation: pulsejg2 4s linear infinite;
    -moz-animation: pulsejg2 4s linear infinite;
    animation: pulsejg2 4s linear infinite;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    -webkit-box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8);
    -moz-box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8);
    box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@-webkit-keyframes pulsejg1 {
    0% {
        -webkit-transform: scale(.6);
        opacity: 0;
    }

    50% {
        -webkit-transform: scale(.6);
        opacity: 0;
    }

    60% {
        -webkit-transform: scale(.9);
        opacity: .2;
    }

    70% {
        -webkit-transform: scale(1.1);
        opacity: .35;
    }

    80% {
        -webkit-transform: scale(1.25);
        opacity: .2;
    }

    100% {
        -webkit-transform: scale(1.4);
        opacity: 0;
    }
}

@-moz-keyframes pulsejg1 {
    0% {
        -moz-transform: scale(.6);
        opacity: 0;
    }

    50% {
        -moz-transform: scale(.6);
        opacity: 0;
    }

    60% {
        -moz-transform: scale(.9);
        opacity: .2;
    }

    70% {
        -moz-transform: scale(1.1);
        opacity: .35;
    }

    80% {
        -moz-transform: scale(1.25);
        opacity: .2;
    }

    100% {
        -moz-transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes pulsejg1 {
    0% {
        transform: scale(.6);
        opacity: 0;
    }

    50% {
        transform: scale(.6);
        opacity: 0;
    }

    60% {
        transform: scale(.9);
        opacity: .1;
    }

    70% {
        transform: scale(1.1);
        opacity: .25;
    }

    80% {
        transform: scale(1.25);
        opacity: .1;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

@-webkit-keyframes pulsejg2 {
    0% {
        -webkit-transform: scale(.6);
        opacity: 0;
    }

    40% {
        -webkit-transform: scale(.8);
        opacity: .05;
    }

    50% {
        -webkit-transform: scale(1);
        opacity: .1;
    }

    60% {
        -webkit-transform: scale(1.1);
        opacity: .3;
    }

    80% {
        -webkit-transform: scale(1.2);
        opacity: .1;
    }

    100% {
        -webkit-transform: scale(1.3);
        opacity: 0;
    }
}

@-moz-keyframes pulsejg2 {
    0% {
        -moz-transform: scale(.6);
        opacity: 0;
    }

    40% {
        -moz-transform: scale(.8);
        opacity: .05;
    }

    50% {
        -moz-transform: scale(1);
        opacity: .1;
    }

    60% {
        -moz-transform: scale(1.1);
        opacity: .3;
    }

    80% {
        -moz-transform: scale(1.2);
        opacity: .1;
    }

    100% {
        -moz-transform: scale(1.3);
        opacity: 0;
    }
}

@keyframes pulsejg2 {
    0% {
        transform: scale(.6);
        opacity: 0;
    }

    40% {
        transform: scale(.8);
        opacity: .05;
    }

    50% {
        transform: scale(1);
        opacity: .1;
    }

    60% {
        transform: scale(1.1);
        opacity: .3;
    }

    80% {
        transform: scale(1.2);
        opacity: .1;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

// end profile picture

Answer 1

您已使用margin-top: 10%;和margin-left: 44.6%;作为百分比，导致在窗口调整大小时移动图片。将其更改为像素，您也可以删除左边距并添加margin: auto;。

变化：

.profilepicture {
margin-top: 10%;
margin-left: 44.6%;
}

要：

.profilepicture {
margin: auto;
}

Answer 2

您使用％值作为边距，这是为什么当您重新调整浏览器大小时，图片移动的原因。请改为使用margin: 0px auto始终将其保持在中间位置和％顶部以始终保持20％的距离，而不是设备的屏幕尺寸。我想你想把这张照片准确放在中间。它的代码应该是这样的：

.profilepicture 

    {
        position: absolute;
        width: 180px;
        height: 180px;
        margin: 0px auto;
        top: 20%;
        left: 0;
        right: 0;
        bottom: 0;
        background: url(/../assets/img/AdolfoBarreto.4.jpg) no-repeat;
        background-size: 180px 180px;
        z-index: 3;
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2), 0 0 5px 2px rgba(0, 0, 0, 0.3), inset 0 0 0 10px rgba(0, 0, 255, 0.2);
        border-radius: 999px;}

你放在那里的动画也一样。通过这个，你将保持图像始终在中间。

英雄图像div叠加移动调整大小

2 个答案: