我在父div的右上方有一个垃圾桶图标:
<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而没有任何边距或空格,则垃圾桶图标将变为不可见。我想要的是垃圾桶图标位于图像的顶部。
答案 0 :(得分:1)
您应该可以将图像的大小绑定到最大值:使用max-height:500px,max-width:700px(或略小的值,这样您就有了余量)。
您还可以在元素上使用z-index - 要么将preview_picture设为负值,要么将trashcan设为正值(大于1)。
答案 1 :(得分:0)
像这样重新排列html:
<div id="image_part">//width: 700, height:500
<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">
<img id="preview_pic" alt="" src=""> //this is where I load image
</div>
答案 2 :(得分:0)
你可以用CSS完成这项工作。只需将#preview_pic
垂直和水平居中,然后应用max-width
和max-height
,这样您就可以保留图像的宽高比,然后z-index
垃圾箱高于图像。< / p>
#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/