logo标签列表

CSS：保持内容比例而不溢出

cssaspect-ratio
10

我正在使用CSS，想要创建一个具有特定长宽比的盒子，无论盒子的尺寸如何都保持不变。但是当里面有更多内容时，我还希望该盒子能够自动增长（保持比例）。

简而言之：

  • 仅使用CSS（如果可能的话）
  • 保持给定的长宽比
  • 允许盒子随内容增长（并保持比例）

我已经尝试过的技术中，盒子的内容无法使盒子增长。 相反，我的唯一选择就是重叠或截取内容。

  1. 填充比例技巧
  2. 基于视口的单位
  3. 替换元素缩放技巧

前两个方法分别占据包装器内部的空间，并使用绝对定位将内容放置在其上方。由于内容是绝对定位的，因此它从文档流中移除。 因此，它无法扩展包装元素。

第二个选项使用固定高度，这也不允许内容增长超出其范围。

这里有一个使用第二个选项的演示（基于视口单位）

* {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>

我部分测试过的进一步方法：

  • object-fit定位
  • flexbox

据我所知，object-fit仅影响替换元素。 我无法在具有此属性的div/p元素上获得任何效果。

对于我的情况而言，Flexbox也不太实用。 根据我目前的了解水平，Flexbox在这里帮助不大。因为它主要是建立多个项目之间的关系。 但我对此并不确定。也许在flexbox中有些我尚未意识到的东西。

1
那么，如果内容太大超出了容器，那么容器会溢出吗？ - zzzzBov
@zzzzBov 是的，内容溢出了框。 - Type-Style
1
尝试使用div { font-size: 4.5vmin; }。 - Tamil Selvan C
3
基本上，你需要使用JavaScript。CSS并不是针对宽高比设计的。虽然可以通过一些方法来模拟，但CSS并非专门为此而建立的。 - Paulie_D
尝试使用 http://fittextjs.com/ 的 JavaScript。 - Tamil Selvan C
显示剩余3条评论
1个回答
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 时，会触发特定的行为：

背景大小 / -图像

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>

object-fit

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>

我知道这个方法。但是我必须处理文本而不仅仅是图像。 - Type-Style
@Type-Style 对不起，我倾向于在一个话题有扩展潜力时专注于单个方面。请查看更新，它涉及图像和文本两个方面。 - zer00ne
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接