Question

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

我在div中使用class=imagewrap显示这些图片，图片中包含images类。

我的总体目标

要在每个小部件上显示多个图像，并保持纵横比（尽可能）。至少他们看起来应该是正确的。
图片应该只在该div中
调整窗口小部件大小时增大/减小图像的大小。

到目前为止我取得的成就/尝试

我可以将图像放在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 在调整大小/拉伸小部件时，小提琴。图像开始重叠

如果有人认为我所宣称的课程本身是错误的，考虑到我想要的输出，那么请改变它们

Answer 1

我认为为了将图像保留在容器中，您必须为图像提供 max-width：100％和 max-height：100％。之后，您可以为 imagewrap 类提供高度和宽度。

试试这个：

price

Answer 2

这里是修复，只需更改.images类中的一些属性。

.images {
/* position: absolute; */
/*height: 100%; */
width: 100% ;
/* top: 0; */
/* left: 0; */
object-fit: contain;
}

当调整父元素的大小时，使用内联块的Div重叠

2 个答案: