Question

我在父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而没有任何边距或空格，则垃圾桶图标将变为不可见。我想要的是垃圾桶图标位于图像的顶部。

Answer 1

您应该可以将图像的大小绑定到最大值：使用max-height：500px，max-width：700px（或略小的值，这样您就有了余量）。

您还可以在元素上使用z-index - 要么将preview_picture设为负值，要么将trashcan设为正值（大于1）。

Answer 2

像这样重新排列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>

Answer 3

你可以用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/

如何防止图像相互重叠

3 个答案: