어떻게이 코드가 다른 이미지 CSS의

에 이미지를 고정합니다 :어떻게이 코드가 다른 이미지 CSS의

<body style="margin:0; padding:0;"> 
    <div style="position: relative; left:0; top:0;"> 

     <img src="images/fullscreen.png" style="max-width: 100%; width: 100%; height:auto; position: relative; top:0; left:0;"/> 
     <img src="images/smaller_animated.gif" style="position:absolute; top:140px; left:458px;"/> 
    </div> 
</body>

fullscreen.png 큰 전체 화면 이미지입니다. 나는 그것을 반응 형으로 만들었습니다. 따라서 브라우저 너비를 줄이면 스크롤하지 않고 대신 크기를 조정합니다.

이제 전체 화면 이미지 영역 내에 배치하려는 애니메이션 GIF가 있습니다. 기본적으로 전체 화면 이미지 내에 큰 직사각형 회색 배경이 있으며 애니메이션 GIF를 해당 공간의 중심에 고정하려고합니다. 그 때 창문의 크기를 조정할 때를 제외하고 잘 작동, 다음 GIF는 이동/전체 화면 이미지로 크기를 조정하고 사각형 배경 밖으로 이동합니다.

Ive는 절대적이고 친척이되어 놀았지만 가까운 생각이 들지 않는 것 같습니다.

출처

2014-06-07 user1547410

JSfiddle하십시오 –

왜 당신은 배경 이미지를 대신 사용하지 않는? –

크기에 gif 이미지가 있습니까? –

이 작업을 수행 할 수 있습니다

HTML :

<div id="fullscreen" align="center"> 
<img class="center_image" src="images/smaller_animated.gif"/> 
</div>

CSS :

#fullscreen { 
    background: url(images/fullscreen.png) red; 
    background-size: 100% 100%; 
    max-width: 100%; 
    width: 100%; 
    height: 100%; 
    position: absolute;  
    top: 0; 
    left: 0; 
} 
.center_image { 
    position: absolute; 
    top: calc(50% - /* halve your height of image */); 
    height: /* height of your image */; 
    width: /* width of your image */; 
}

출처

2014-06-07 12:01:32

어떻게이 코드가 다른 이미지 CSS의

답변

관련 문제