모든 장치에서 이미지를 반응시키는 방법

나는 모든 장치에 대해 내 이미지를 반응 적으로 보이게 만듭니다. 헤더에는 비디오와 비디오 앞에있는 이미지가 있습니다. 바탕 화면에서 볼 때 이미지는 컨테이너의 중앙에 잘 배치되지만 작은 장치의 경우 이미지가 컨테이너 아래에 잘못 배치되는 경우 창의 크기를 조정할 때 크기가 조정될 때 표시됩니다. 크기를 조정할 때 보이는 방법 http://imgur.com/a/VHjvg 모든 장치에서 이미지를 반응시키는 방법

을 : 그것은 바탕 화면에 보이는 방법

http://imgur.com/a/y6pVy

내 HTML 코드 :

<!-- Header --> 
     <div class="header-container"> 

     <div class="video-container"> 

      <video preload="true" autoplay="autoplay" loop="loop" volume= "0"> 

      <source src="video/backgroundAnime.mp4" type="video/mp4"> 
      <source src="video/backgroundAnime.webm" type="video/webm"> 
      <source src="video/backgroundAnime.ogv" type="video/ogg"> 

      </video> 
      <div class="img-container"> 
      <img src="img/albayda.png" class="img-responsive"> 
      </div> 
     </div> 



    </div>

내 CSS :

.header-container{ 

    width: 100%; 
    height: 700px; 
    position: relative; 
    padding: 20px; 
} 

.video-container{ 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 
.video{ 
    position: absolute; 
    z-index: -1; 
    width: 100%; 
} 
.img-responsive{ 

max-width: 100%; 
position: absolute; 
top: 50%; 
left: 50%; 
-webkit-transform: translate(-50%, -50%); 
-ms-transform: translate(-50%, -50%); 
transform: translate(-50%, -50%);

}

출처

2017-02-18 EyedFox1

CSS 미디어 쿼리로 문제를 해결할 수도 있습니다. 여러분이 원하는 픽셀 다르게 당신의 웹 사이트를 표시합니다이 브라우저로

@media screen and (min-width: 480px) { 
    body { 
     background-color: lightgreen; 
    } 
}

: 코드가 특정 픽셀에서 버그가 시작되면

당신은 다음 코드를 사용할 수 있습니다. 대괄호 안에 코드를 입력하면됩니다.

출처

2017-02-18 19:37:03

당신은 img 태그이 스타일을 제공 할 수 있습니다 :

object-fit:cover;

을

출처

2017-07-12 13:17:09

모든 장치에서 이미지를 반응시키는 방법

답변

관련 문제