css - 是否可以缩放一个容器以适应另一个容器？

Question

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

我已将问题简化为几个 div。 inner容器包含 top和 bottom容器，现在我想安装 inner在另一个 outer容器完全保持纵横比并居中。

像这样的东西。



一个基本模板。这里的问题之一是我不确定从 CSS Angular 来看的职责。我正在想象这类似于 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>

Here is the same Fiddle

编辑 :

只是为了说明不应该有滚动条。 inner可以是任何大小的任何东西。它可能有 1000 个 youtube 嵌入，或者一个 2000x2000 的 Canvas 游戏。但是如果 outer是 100px x 100px 那么所有内容都“适合”该空间。

编辑

基本上我想要 object-fit: contain .当您有 div和 img里面。 contain将缩放以使该几何图形适合父容器。它没有被裁剪或调整大小。但是，我有一个 content div不是图像。那么如何重现相同的行为呢？

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*/
}

Demo in 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;
}

Demo in JsFiddle

解决方案3:
/使用高度: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%;
}

Demo in JsFiddle

旁注:
当您想要设置特定大小时，您不需要为外部 div 使用 width:100% 和 height:100%，除非您想使用移动响应式设计，否则您还需要 max-width，因为使用百分比来制作div 与浏览器窗口或 div 容器成比例。

最大宽度:100%；到所有 div( parent 和 child )成为移动响应，因此在调整窗口大小以适应时宽度将被调整，
框尺寸:边框框； -moz-box-sizing:边框框；当您向它们添加填充和边框时，将 .top、.bottom div 包含在 .inner div 中。