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

时间：2016-03-02 16:50:11

标签： css aspect-ratio

我正在使用 CSS ，我想创建一个具有特定比率的框，无论框的大小如何，都会保留该框。但是，如果内容中有更多内容，我希望该框增长。

按顺序总结：

  • 仅限CSS （如果可能）
  • 保留给定的宽高比
  • 如果内容（有比例）
    • ，则允许框增长

在我迄今为止尝试过的那些技术中，盒子的内容无法使盒子增长。相反，我唯一的选择是重叠或剪裁内容。

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

    4. 第一种和第三种方法占据了包装器内部的空间，内容使用绝对位置放在其上面。 由于内容是绝对定位的，因此将其从文档流中删除。因此无法扩展包装元素。

    第二种选择是使用固定的高度，这也不允许内容超出它。

    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>

    我部分测试的其他方法：

    • 对象适合定位
    • Flexbox的

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

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

1 个答案:

答案 0 :(得分：2)

的更新

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会调用某种行为：

background-size / -image 

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>

相关问题
最新问题