이미지 크기 조절시에도 오른쪽 위 모서리에 닫기 버튼 유지

Question

CSS를 사용하여 이미지의 크기를 조절할 때도 이미지의 오른쪽 상단 모서리에 닫기 버튼을 유지하는 방법은 무엇입니까? 사용자가 브라우저에 이미지의 크기가 다른 크기가되는 경우의 비율입니다. p.s. 어떻게 full_close 사용할 때 올 {왼쪽 : 0 픽셀을} 나는 이미지를 잃고 완전히 JSFIDDLE

.fit { 
max-width: 100%; 
} 

.center { 
display: block; 
top: 0px; 
right: 0; 
} 

.right { 
position: relative; 
right: 0; 
} 

#full_image {  
    width: 0px; 
    height: 0px; 
    left: 0px; 
    position: absolute; 
    opacity: 1; 
    z-index: 9; 
} 

#full_image img {  
    left: 0px;  
    position: fixed; 
    overflow: hidden; 
} 

#full_image ul { 
    width: 0px; 
    height: 0px; 
    list-style: none outside none; 
    position: relative; 
    overflow: hidden; 

} 

#full_image li:first-child { 
    display: list-item; 
    position: absolute; 
} 

#full_image li { 
    position: absolute; 
    display: none; 

} 


#full_image .full_close{ 
    background-color:yellow; 
    top: 10px;  
    cursor: pointer; 
    height: 29px; 
    opacity: 1; 
    position: absolute;  
    width: 29px; 
    z-index: 999; 
    left: 0px; 
} 

<div id="full_image"> 
<ul><li><img class="center fit right" src="http://cdn.funkyspacemonkey.com/wp-content/uploads/2013/06/steve-wozniak-white-iphone-4.jpg"/></li></ul> 
    <span> <a href="#" class="full_close "></a></span> 

    </div> 

Answer 1

그럼 당신은 불필요한 스타일과 요소를 많이 가지고있다. 업데이트 된 예제를 확인이 당신이 필요로하는 모든 것을해야한다 : http://jsfiddle.net/dmEpF/34/

<div id="full_image"> 

    <img src="http://cdn.funkyspacemonkey.com/wp-content/uploads/2013/06/steve-wozniak-white-iphone-4.jpg"/> 

    <a href="#" class="full_close">X</a> 

</div> 

그리고 CSS를 :

#full_image { 
    position: relative; 
    display: inline-block; 
    max-width: 100%; 
} 

#full_image img {  
    max-width: 100%; 
} 

#full_image .full_close{ 
    background-color:yellow; 
    top: 10px;  
    cursor: pointer; 
    height: 29px; 
    opacity: 1; 
    position: absolute;  
    width: 29px; 
    z-index: 999; 
    right: 10px; 
    color: #222; 
    text-decoration: none; 
    text-align: center; 
    line-height: 28px; 
}