试图保持图像包含在另一个图像

Question

我正在使用jQuery更改点击后图像的大小。无论点击后图像的大小如何，我怎样才能保持右上角的关闭按钮。 JSFIDDLE

我的CSS

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

#full_image img { 
background: url("zoom-on.png") no-repeat; 
background-position: 5px 5px; 
left: 0px; 
width: 339px; 
height: 211px; 
position: relative; 
overflow: hidden; 
} 

#full_image .full_close{ 
background: url("zoom-on.png") no-repeat; 
top: 10px;  
cursor: pointer; 
height: 29px; 
opacity: 1; 
position: absolute;  
width: 29px; 
z-index: 999; 
right: 0px; 
} 

我的HTML

<div id="full_image"><img src=""/> 
<span> <a href="#" class="full_close"></a></span> 
</div> 

的事情是我能保持包含#full_image内的图像，但我需要它含有#full_image IMG

Answer 1

试试这个CSS：

#full_image { 
    position: relative; 
    display:inline-block; 
    *display:inline; zoom:1; /* IE7 fix */ 
    z-index:1; 
} 
#full_image span { 
    background:url("zoom-on.png") no-repeat; 
    top: 10px; 
    right: 0px; 
    width: 32px; 
    height: 32px; 
    display:none; 
    cursor: pointer; 
    position: absolute; 
    z-index:2; 
} 
#full_image:hover span { 
    display:block; 
} 

和HTML

<div id="full_image"> 
    <img src="image.jpg" /> <a href="#" class="full_close" title="Close"><span> </span></a> 
</div> 

http://jsfiddle.net/r9LDp/4/

Answer 2

检查中这Fiddle。这是你想要的吗？

我创建了一个DIV与full_imageID并将图像设置为background。
然后，我已将close button添加到DIV和position - 将它们都添加到了它们中。
因此close button将始终在image的右上角，尽管大小为image。

Answer 3

检查here 我已经editted你full_close类的CSS的解决方案

#full_image { 
    width: 5px; 
    height: 5px; 
    left: 0px; 
    position: relative; 
    opacity: 1; 
    z-index: 9; 
    display: inline; 
} 

#full_image img { 
    left: 10px; 
    width: 250px; 
    height: 211px; 
    position: relative; 
    overflow: hidden; 
} 

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