Html 缩小孩子以适应父母

我有一个固定大小的div，子元素的数量可变。我事先不知道孩子们的大小。目标是缩小它们以适合家长

例如：

.parent{
宽度：100px；
高度：100px；
边框：2个绿色虚线；
}
.家长*{
最大宽度：100%；
最大高度：100%；
}

---

试试这个

.parent *
    {
    width:100%;
    }

---

您可以使用css属性中的

position:absolute

尝试此操作。只要你缩小它，孩子就会适合父母。如果您对此有任何问题，请在下面进行评论。快乐编码！：）

.parent{
填充：10px；
边框：实心1px#3636；
宽度：90%；
高度：300px；
}
.孩子{
位置：绝对位置；
边框：实心1px红色；
宽度：80%；
高度：200px；
文本对齐：居中；
填充：10px；
}

小孩

CSS

• 使节点符合其父维度
• 为了让他们留在父母的边界内

在演示中，父对象和图像都是相同的，但有一个例外：第一个父对象是200x200px，第二个父对象是100x100px。正如我们所看到的，无论父对象的维度如何，子对象都完全符合父对象的边界

详细信息将在演示中进行注释

演示

.parent{
宽度：200px；
高度：200px；
边框：2个绿色虚线；
/*行为像一张桌子
||这意味着任何
||表元素和表元素
||被设计成像一个男孩
||表元素将符合
||在维护的同时将其发送给其父级
||这是纵横比。
*/
显示：表格；
/*这将使孩子们能够留下来
||在它的边界内，如果他们是
||绝对定位
*/
位置：相对位置；
}
.ver2{
宽度：100px；
高度：100px；
}
.家长*{
最大宽度：100%；
最大高度：100%；
/*表现为一个意思是
||它自然会收缩到
||符合尺寸
||如果它是一个
||表或已设置样式的元素
||摆桌子
||保持它的纵横比。
*/
显示：表格单元格；
/*它将停留在限制范围内
||它的父对象的边界
||（除非它是负的
||价值观）
*/
位置：绝对位置；
}
img：第一种类型{
排名：0；
左：0；
/*在img1之上分层
||显示它的位置
||在父代内
*/
z指数：1；
/*用于显示img1的位置*/
不透明度：.5；
}
img：类型的最后一个{
底部：0；
右：0；
}
.仅限demoOnly{
浮动：对；
显示：内联块；
}

父级为100x100px

img1是AR 5:8-62.5x100px

img2是AR 6:5-100x83px
家长是200x200px

img1是AR 5:8-125x200px

img2是AR 6:5-200x166px

在您的示例中，子对象已经小于父对象，因此没有问题。OP要求一个解决方案，其中子对象比父对象大<代码>位置属性只是解决方案的一半请参见我的答案。父对象还具有OP指定的固定维度，您已为其指定了百分比，使用

height:400px编辑您的子对象，您将看到OP的问题所在。