2017-12-27 7 views
0

내 사이트를 반응 형으로 만들기 위해 노력 중이며 헤더 이미지에 문제가 있습니다. 이미지는 얼굴 사진이며 오른쪽에 정렬됩니다. 모바일 및 태블릿 모두에서 이미지가 하단과 우측에서 잘립니다. 헤드 샷을 가운데에 배치하고 내 머리글 (모바일 및 태블릿에서) 상단에 h1, h3 및 p 위에 표시하고 싶습니다. 내 이미지를 계속 오른쪽 (바탕 화면)에 정렬하면서이 작업을 수행 할 수있는 방법이 있습니까? 감사!헤드 샷 이미지 반응하기

HTML 
    <!-- Header --> 
    <header class="masthead"> 
     <div class="container"> 
     <div class="intro-text"> 
      <h1>voluptatem accusantium</h1> 
      <h3 style="margin-top:-2%">UX Research & Design</h3> 
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  </p> 
     </div> 
     </div> 
    </header> 

CSS 

header.masthead { 
    text-align: left; 
    color: white; 
    background-image: url("../img/headshot.png"); 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
    background-position: right 85px top 80px; 
    background-size: 400px 481px 
} 

답변

0

고정 폭은 종종 반응이 빠른 디자인을 어렵게 만듭니다. 이미지의 너비를 고정 된 픽셀 대신 백분율로 만들 생각을 했습니까?

또는 중요한 중단 점에 미디어 쿼리를 추가 할 수 있습니다. 다음과 같이 (특정 요구와 레이아웃에 따라 다름) :

@media screen and (max-width 1024px) { 
    header.masthead { 
     background-size: 300px 400px; 
    } 
}