div가 움직이지 않고 div 내부의 이미지를 확대

Question

어떻게이 div 눈금의 내부에 이미지를 만들 수 있습니까? 그래서 나는 단지 이미지가 확대되기를 원한다. 여기

코드입니다 :

<div id="container"> 
    <img id="image" src="some-image"> 
</div> 

Answer 1

사용 transform: scale

#container { 
 
    display: inline-block; 
 
    margin: 20px; 
 
    border: 1px solid black; 
 
    overflow: hidden;   /* clip the excess when child gets bigger than parent */ 
 
} 
 
#container img { 
 
    display: block; 
 
} 
 
#container:hover img { 
 
    transform: scale(1.3); 
 
    transform-origin: 50% 50%; 
 
}

<div id="container"> 
 
    <img id="image" src="http://placehold.it/200"> 
 
</div>