如何防止图像相互重叠
如何防止图像相互重叠
提问于 2014-02-06 00:07:48
我在父div的右上方有一个垃圾桶图标的png：
<div id="image_part">//width: 700, height:500
<img id="preview_pic" alt="" src=""> //this is where I load image
<img style="float:right;cursor:pointer; margin-top:10px;margin-right:10px;" title="delete this photo" src="img/trashcan1_icon.png" height="20" width="20">
</div>加载图像时，如果图像大小小于其父图像大小(即image_part)，则图像应该位于div image_part的中心，并且在div image_part和图像之间仍有空白，而垃圾扫描是可见的。但是，如果图像足够大，可以占用所有的父div image_part而没有任何边距或空间，那么垃圾扫描图标就变得不可见了。我想要的是垃圾桶图标在图像本身的顶部。
Stack Overflow用户
发布于 2014-02-06 02:15:34
你只需使用CSS就可以完成这个任务。只需将#preview_pic垂直和水平地居中，然后应用max-width和max-height，这样您就可以保持图像的高宽比，然后将垃圾罐放在图像的较高位置。
#image_part {
width:700px;
height:500px;
border:1px solid #666;
position:relative;
}
#trashcan {
z-index:3;
position:absolute;
top:10px;
right:10px;
cursor:pointer;
}
#preview_pic {
z-index:2;
max-height:500px;
max-width:700px;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
}参见本例：http://jsfiddle.net/vD2u8/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21591391
复制相关文章
相似问题
腾讯云开发者
