2017-12-29 4 views
0

나는 내 사이트를 반응 형으로 만들기 위해 노력하고 있습니다. 지금은 텍스트가 반응하지만 내 이미지는 태블릿보기에서 부분적으로 잘려나 가고 모바일에서는 내 텍스트 설명 상자에서 사라집니다. 어떤 도움이라도 좋을 것입니다. 다음은 내 코드와 내 사이트가 태블릿보기에 표시되는 모습입니다. 이미지 태블릿보기에서 자르기/사라짐

CSS 
 

 
.work { 
 
    -webkit-padding-start: 0; 
 
    list-style-type: none !important; 
 
    padding: 4vw; 
 
    margin: 0 auto; 
 
    background-color: #f7f7f7; 
 
} 
 

 
.UMMA { 
 
    background-image: url(../img/UMMA.jpg); 
 
} 
 

 
@media only screen and (max-width: 720px) { 
 
.UMMA { 
 
     background-position-x: 30%; 
 
    } 
 
}
<li class="section UMMA”> 
 
    <div class="description"> 
 
     <h2>UMMA</h2> 
 
     <p>Making the on-site museum experience more engaging for visitors.</p> 
 
     <a class="button" target="_blank" href=“UMMA.html”>View Project</a> 
 

 
    </div> 
 
</li>

+0

background-size:100%;는'Z-index'으로 시도 추가해야합니다. –

답변

0

looks at tablet view. 당신은

.work { 
 
    -webkit-padding-start: 0; 
 
    list-style-type: none !important; 
 
    padding: 4vw; 
 
    margin: 0 auto; 
 
    background-color: #f7f7f7; 
 
} 
 

 
.UMMA { 
 
    background-image: url(https://www.w3schools.com/w3css/img_fjords.jpg);/*Image use for example*/ 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
} 
 

 
@media only screen and (max-width: 720px) { 
 
.UMMA { 
 
     background-position-x: 30%; 
 
    } 
 
}
<li class="section UMMA"> 
 
    <div class="description"> 
 
     <h2>UMMA</h2> 
 
     <p>Making the on-site museum experience more engaging for visitors.</p> 
 
     <a class="button" target="_blank" href=“UMMA.html”>View Project</a> 
 

 
    </div> 
 
    </li>

+0

답장을 보내 주셔서 감사합니다! background-size : 100 %를 추가하려고했습니다. 및 background-repeat : no-repeat; 내 코드로 변경했지만 아무 것도 변경하지 않았습니다. 다른 아이디어? – Avery9115

+0

URL 또는 코드를 공유한다면 – Ezzuddin

+0

확실한 것입니다! 내 사이트가 현재 게시되지 않았지만 여기에 내 github 저장소에 대한 링크가 있습니다 https://github.com/amberkar/Work – Avery9115