能否将一个容器缩放以适应另一个容器的大小？

Question

在各种技术中，一个关键功能是将任何内容适配到其他任何内容。这并不是一个微不足道的问题，几年前我得到了一个非常冗长的JS解决方案，我对此并不是特别满意。

我已经简化了问题，将其转化为几个div。inner容器包含一个top和bottom容器，现在我想将该inner精确地适配到另一个outer容器内，保持纵横比并居中显示。

类似于这样的东西。

一个基本模板。这里的一个问题是，我不确定从CSS角度来看的责任。我将其视为类似于object-fit: contain，唯一的区别是我有一个div容器而不是一个几何对象，但是寻求类似的行为。

html, body {
  width: 100%;
  height: 100%;
  margin: 0
}

.outer {
  width: 100%;
  height: 100%;
}

.inner {
  
}

.top {
  background-color: #0ff;
  width: 1000px;
  height: 1000px;
}

.bottom {
  background-color: #0f0;
  width: 1000px;
  height: 1000px;
}

<div class=outer>
  <div class=inner>
    <div class=top>
    </div>
    <div class=bottom>
    </div>
  </div>
</div>

这里是相同的 Fiddle

编辑：

为了明确应该没有滚动条。 inner 可以是任何大小的任何内容。它可能有 1000 个 youtube 嵌入，或者一个 2000x2000 的画布游戏。但如果 outer 是 100px x 100px，则所有内容都“适合”该空间。

编辑

基本上我想要 object-fit: contain。 当您拥有一个 div 和内部的一个 img 时。 contain 将缩放以适应父容器的几何形状。它不被裁剪或调整大小。但是，我有一个 content div 而不是图像。那么如何重新创建相同的行为？

- user1059939

---

你能把你的代码放在代码片段里吗？ - Sakkeer A

如果top和bottom的宽度可以改变以适应容器，这样可以吗？ - Armin Ayari

顶部和底部只是内容的一部分，它们并不重要。inner 的内容并不重要，可能是这个演示、1000 张图片或一个巨大的画布游戏。无论 inner 作为容器是什么，都需要能够缩放到 outer 中。物体不能调整大小，但必须在没有裁剪或失真的情况下进行缩放。 - user1059939

@user1059939，我已经发布了一个答案，请看看它是否能帮助你解决问题。 - Armin Ayari

Answer 1

解决方案1：移动响应式

.outer{
  max-width:100%;
}

.inner{
  border:1px solid red;
  max-width:100%;
}

/*You can join both selectors in CSS with same properties */
.top,.bottom {
  box-sizing:border-box;
  -moz-box-sizing: border-box; 
  border:4px solid blue;
  width: 1000px;
  height:1000px;
  max-width:100%;

  /*The max-width will make the boxes fit inside the screen (no scrolling for the width so no need to use overflow-x), but the divs will not be 1000px in case the containing div or in case the borwser window is less than 1000px*/
}

在 JsFiddle 中的演示

方案 2: /* 使用固定大小的简单数学计算 */

.inner{
   border:1px solid red;
   width:1000px;
   height: 2000px;
}
.top, .bottom{     
  box-sizing:border-box;
  -moz-box-sizing: border-box; 
   border:4px solid blue;
   width: 1000px;
   height: 1000px;
}

在 JsFiddle 中的演示

解决方案3: /使用 height:50%; 可以将高度分成两半，但如果要保持1000px的高度，则不需要这样做。 在某些情况下，您可能需要使用 min-height:1000px; 来防止高度小于1000px;/

.inner{
   border:1px solid red;
   width:1000px;
   height: 2000px;
}
.top , .bottom{
   box-sizing:border-box;
   -moz-box-sizing: border-box; 
   border:4px solid blue;
   width: 1000px;
   height: 1000px;
   max-height:50%;
}

在JsFiddle中的演示

附注： 当您想设置特定大小时，您不需要为外部div使用width：100％和height：100％，除非您想使用移动响应式设计，那么您还需要max-width，因为百分比用于使div与浏览器窗口或div容器成比例。 将max-width：100％应用于所有div（父级和子级），以实现移动响应式设计，因此在调整窗口大小以适应时，宽度将被调整大小， box-sizing：border-box; -moz-box-sizing：border-box; 用于在向它们添加填充和边框时将.top，.bottom div包含在.inner div内。

- Yahya Bahsoun

---

感谢您详细的回答！但我觉得我搞糊涂了我的问题。在JS Fiddle上，渲染窗口很小。我的2000像素高度的“inner”应该被缩放以适应可用空间。（没有滚动条）。如果文档的“body”是100像素x 100像素。就不应该有滚动条，但我仍然应该看到“inner”内容（只是非常缩小）。 - user1059939

“我的高度为2000像素的内部内容应该被缩放以适应可用空间”，因此您可以在所有div上使用max-height:100%; .outer，.inner.top，.bottom { max-height: 100%; } - Yahya Bahsoun

我在午餐期间玩了一会儿JSFiddles，但是我没有得到我想要的结果。我尝试添加max-height，去掉max-width等等，但最终仍然有滚动条。 - user1059939

Answer 2

将"display: grid"添加到".outer"。

看一下这个代码片段：

https://jsfiddle.net/yxho9n5a/31/

- Armin Ayari

---

谢谢！然而我并没有看到太多与我的原始行为不同之处。在一个fiddle中，我期望看不到滚动条，但仍然能看到我的1000x2000的内容（只是缩小了很多来适应）。 - user1059939