1

即使我使用 css 缩放图像，我怎么能在图像的右上角保留一个关闭按钮？缩放是根据用户何时使浏览器缩放图像的大小不同。ps 当我使用 full_close {left:0px;} 时怎么会完全丢失图像 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>
4

1 回答 1

3

那么你有很多不必要的样式和元素。查看更新的示例，这应该就是您所需要的：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;
}
于 2013-09-03T19:35:06.043 回答