html - 调整父元素大小时，使用内联 block 的 Div 重叠

Question

在我的网页上有Gridster其中包含多个图像的小部件。可以使用 + 按钮添加图像。小部件也可以调整大小。

我在带有 class=imagewrap 的 div 中显示这些图像，并且这些图像具有 images 类。

我的总体目标

1. 在每个小部件上显示多个图像并保持宽高比(尽可能)。至少它们应该看起来合适。
2. 图片应仅在该 div 内
3. 在调整小部件大小时增加/减小图像的大小。

到目前为止我已经取得/尝试过什么

我可以将图像放在 div 中(但我看到有些图像不在 div 中而是从中出来)，然后将这些 div 放在小部件上。我不确定我为此使用的方法是否正确。

我已经声明了 imagewrap 类，它为图像形成一个 div。如下所示:

.imagewrap {
  display:inline-block;
  position:relative; 

  min-height: 50px;
  min-width:  50px;
/*
  max-height: 100px;
  max-width:100px;
*/
  width: 25%;

  margin-top: 10px;
  margin-right: 4px;
  margin-left: 4px;
  margin-bottom: 4px;
}

每张图片都有一个images类

.images {
  position: absolute;
  /*height: 100%;   commented to keep the aspect ratio when the widget is resized*/
  width: 100% ;
  top: 0;
  left: 0;
}

放置图片的HTML代码

<div class="imagewrap"><img class="images" src='+ images[j] +' title="' + titles[j]+ '"><input type="button" class="removediv" value="X" /></div></div>

我面临的问题

当我调整小部件的大小时，图像往往会相互重叠。我不知道如何解决它。

Fiddle在您调整/拉伸(stretch)小部件时摆弄。图像开始重叠

考虑到我想要的输出，如果有人认为我声明的类本身是错误的，那么也请更改它们

Answer 1

我认为为了将图像保存在容器中，您必须为图像提供 ma​​x-width: 100% 和 ma​​x-height:100%。之后，您可以为 imagewrap 类提供高度和宽度。

试试这个:

.imagewrap {
  display:inline-block;
  position: relative;

  max-height: 50px;
  max-width:  50px;

  width: 25%;

  margin-top: 10px;
  margin-right: 4px;
  margin-left: 4px;
  margin-bottom: 4px;
}


.images {
  max-width:100%;
  max-height:100%;
}