시차 효과가 이미지를 자릅니다. 전체 크기로 이미지를 표시하지 않습니다.

온라인으로 공개적으로 사용한 시차 효과에 문제가 있습니다. 분명히 그 효과는 사진 자르기입니다. 전체 크기 여야하며 화면 크기가 변경되면 이미지도 여전히 전체 크기 여야합니다. 내 웹 사이트, lunationboards.com에서 볼 수 있습니다. 코드는 다음과 같습니다.시차 효과가 이미지를 자릅니다. 전체 크기로 이미지를 표시하지 않습니다.

HTML 
<!DOCTYPE html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Lunation Boards</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%"> 
    <link rel = "stylesheet" href="stylesheet.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
</head> 
<body> 
<header class="Header" id="myHeader"> 
    <a class = "headerLogo"> 
     <h1 class = "head" style=>Lunation Boards</h1> 
     <style> 
      a{text-decoration: none;} 
     </style> 

    </a> 
    <div class="socialmedia"> 
     <a class = "Facebook"> 
      <a href="https://www.facebook.com/LunationBoards/" target="_blank"><img src = "fbicon.png" width="50px" height="50px"></a> 
     </a> 
     <a class = "Instagram"> 
      <a href="https://www.instagram.com/lunationboards/" target="_blank"><img src = "Insta.png" width="50px" height="50px"></a> 
     </a> 
     <a class = "Youtube"> 
      <a href="https://www.youtube.com/channel/UC4qIP_3VKl2v_73t_2VFTfA" target="_blank"><img src = "tube.png" width="50px" height="50px"></a> 
     </a> 
    </div> 
</header> 
<div class="parallax-window" data-parallax="scroll" data-image-src="pic2.jpg"></div>

CSS

body { 
     margin: 0; 
     overflow-x: hidden; 
     padding: 0; 
     width: 100%; 
    } 

    .Header { 
     position: fixed; 
     z-index: 1; 
     width: 100%; 
     height: 80px; 
     background-color: black; 
     text-align: right; 
     overflow: hidden; 
    } 

    .head { 
     color: white; 
     font-family: 'Calibri Light'; 
     font-size: xx-large; 
     text-align: center; 
    } 
.header1 { 
     padding-top: 50px; 
     display: inline-block; 
     width: 90%; 
    } 
.parallax-window { 
     min-height: 900px; 
     background: transparent; 
     -webkit-background-size: contain; 
    }

출처

2017-05-22 Noah Tanenholtz

사진? 사진의 어느 부분이 잘립니다? 모바일 장치와 작은 장치에서는 시차가 작동하지 않습니다.

<div id="mobile-pic1"></div> 
CSS: 
#mobile-pic1 { 
    height: 80vh; 
    width: 100%; 
    background-image: url('photo.jpg'); 
    background-position: 1% 14%; // whatever suits you 
    background-size: cover; 
}

그런 다음 바탕 화면 시차 꼬추를 숨기기 위해 미디어 쿼리를 사용 :이 도움이하지만 정말 질문을하지 않는 경우

@media screen and (min-width: 500px) { 
    .parallax-window { 
     display: none; 
    } 
}

은 몰라 당신은 일부 모바일 특정 코드를 시도 할 수 있습니다.

출처

2017-05-22 23:49:19

이미지가 어떻게 보이는지 보여줄 수는 없지만 처음 나타나는 이미지는 이미지가 작아 져야하고 다른 휠이있는 전체 보드를 보여야하지만 –

정말 도움이 필요합니다. 이. 내가 할 수있는 일이 있니? –

이미지 배경 위치를 조정해야합니다. Google Inspect를 사용하십시오. –

시차 효과가 이미지를 자릅니다. 전체 크기로 이미지를 표시하지 않습니다.

답변

관련 문제