Question

即使我使用css缩放图像，如何在图像的右上角保持关闭按钮？比例是根据用户何时使浏览器的大小不同来缩放图像。附：我怎么用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>

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;
}

即使图像缩放，也要在右上角保持关闭按钮

1 个答案: