Подтвердить что ты не робот

CSS: сохранить пропорции без переполнения содержимого

Я использую CSS, и я хочу создать коробку с определенным соотношением , которое сохраняется независимо от размера окна. Но также я хочу, чтобы поле увеличивалось, если в нем больше контента.

Чтобы выразить слова в порядке:

  • Только CSS (если возможно)
  • сохранить заданное соотношение сторон
  • Разрешить коробку расти, если есть больше контента (с отношением)

В тех методах, которые я до сих пор пробовал, содержимое ящика не способно увеличить размер окна. Вместо этого мои единственные варианты перекрывают или обрезают содержимое.

Первый и третий методы занимают пространство внутри обертки, а контент помещается поверх этого, используя абсолютную позицию. Поскольку контент абсолютно позиционируется, он удаляется из потока документов. Поэтому он не может расширить оберточный элемент.

Второй вариант использует фиксированную высоту, которая не позволяет также вырастить контент за его пределами.

Ниже приведена демоверсия, использующая второй вариант. (на основе единиц просмотра)

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

ОТВЕТЫ

Ответ 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>