CSS:保持宽高比而不溢出内容

Question

我正在使用 CSS，我想创建一个具有特定比率 的框，无论框的大小如何，该比率都保持不变。但我也希望盒子在内容更多时增长。

按顺序概括:

• 仅 CSS (如果可能)
• 保持给定的纵横比
• 如果有更多内容(按比例)允许盒子增长

---

到目前为止，在我尝试过的那些技术中，盒子的内容无法使盒子变大。相反，我唯一的选择是重叠或剪切内容。

1. Padding-ratio Hack
2. Viewport based units
3. Replaced Element Scale Hack

第一种和第三种方法是占用包装器内部的空间，并使用绝对位置将内容放在包装器的顶部。 由于内容是绝对定位的，因此它已从文档流中删除。因此无法展开包装元素。

第二个选项使用固定高度，这也不允许内容超出它。

Here is a demo using the second option. (based on viewport units)

* {margin: 0; padding: 0;}
div{
  width: 50vmin; height: 50vmin;

  font-size: 30px;
  background: #ccc;
  margin: auto; 
  padding: 3%;
}

<div>
 <p>If you scale your window, you will see that the text does not fit into the box at some point, and therefore the text will be overlapping the box.<p>
</div>

我部分测试的其他方法:

• 对象匹配定位
• flex 盒子

据我所知，Object-Fit 只影响替换元素。 我无法使用此属性对我的 div/p 元素产生任何影响。

对于我的场景，Flexbox 也不实用。 根据我目前的知识水平，flexbox 在这里帮不上什么忙。因为它主要是关于建立多个元素之间的关系。 但我不确定。也许 flexbox 中有一些我还不知道的东西。

Answer 1

更新

OP 现在强调文本的重要性，所以这是我的看法:

• 使用 background-image 和 background-size:contain。
• figure 具有 background-sized background-image
• figcaption 包含文本。
• 这个特殊的 png 是 800x600 AR 4:3，它保持得很好。
• 文本在调整大小之间流动良好，不可避免的文本溢出被截断，但绝不会超出边界。

Plunker

片段

@font-face {
  font-family: EraserRegular;
  src: url(http://glpjt.s3.amazonaws.com/so/font/EraserRegular.ttf);
}
html {
  box-sizing: border-box;
  font: 500 16px/1.428'EraserRegular';
  height: 100vh;
  width: 100vw;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  font-size: 1rem;
  line-height: 1;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6,
legend {
  font-variant: small-caps;
  margin-bottom: 15px;
}
h1 {
  font-size: 1.5rem;
}
h2 {
  font-size: 1.4rem;
}
h3 {
  font-size: 1.3rem;
}
legend {
  font-size: 1.35rem;
}
p {
  margin: 0 5px 15px;
}
img {
  display: inline-block;
  width: 25em;
  height: auto;
  margin: 20px 0;
}
a {
  color: #Fc0;
  text-decoration: none;
  margin: 10px 20px;
  display: inline-block;
}
a:hover {
  color: #CCC;
}
button {
  font: inherit;
  line-height: 1.5;
  padding: 1px 3px;
  border-radius: 8px;
  border: 1px solid #fc2;
}
.noSel {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
code * {
  font: 100 1rem/1.5'Consolas';
  color: #6F3;
  background: #777;
  border: 2px inset #CCC;
  margin: 10px 10px 15px 15px;
}
.board {
  width: 100%; padding-bottom: 75%; height: 0; position: relative; background: url(http://i.imgur.com/gUobVE5.png) center center no-repeat;  background-size: contain; }
  figcaption {
    font-size: 100%;
    color: white;
    text-align: left;
    position: absolute;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    padding: 40px 30px;
  }

<figure class="board">
  <figcaption>TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
    TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
    TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
    TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
    TEST TEST TEST TEST TEST TEST TEST</figcaption>
</figure>

想到的两个属性是 object-fit: contain和 background-size:contain连同background-image值 contain 调用特定行为:

背景尺寸/-图像

figure {
    background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) center center no-repeat;
    -moz-background-size: contain;
    background-size: contain;
    width: 9em;
    height: 9em;
}
code { font: 400 14px/1.3 'Consolas'; background: #ccc; }

<figure></figure>
<figcaption><code>background-image</code> and <code>background-size:contain</code> also maintains it's AR;<br> fixed lengths are not required; <br>this is for replaced objects like images and videos</figcaption>

多个背景图片

section { width: 100vw; height: 100vh; display:table; }
.shirley_lenna {
  background: url(http://4.bp.blogspot.com/_xyCeswQjRbc/TTTtaB5t2vI/AAAAAAAACCc/lc_kHPTSnSg/s1600/Shirley+02.jpg) left center no-repeat, url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) right center no-repeat;
  background-size: contain;
  width: 100vw;
  min-height: 20em;
  display: table-cell;
}

<section>
<figure class="shirley_lenna"></figure>
  
  </section>

对象匹配

img {
    width: 140px;
    height: 140px;
    border: solid 1px white;
    object-fit: cover;
}

code { font: 400 14px/1.3 'Consolas'; background: #ccc; }

<figure>
<img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png">
<figcaption><code>object-fit</code> maintains AR;<br> must use fixed width and height;<br> for replaced objects like img, video, etc.</figcaption></figure>