Адаптивный квадратный блок с текстом внутри? [Дубликат]

Другой способ взглянуть на это: Используются 64 бита для представления чисел. Как следствие, не может быть представлено более 2 ** 64 = 18 446 744 073 709 551 616 различных чисел.

Тем не менее, Math говорит, что существует уже бесконечное число десятичных знаков между 0 и 1. IEE 754 определяет кодировку для эффективного использования этих 64 бит для гораздо большего количества пробелов плюс NaN и +/- Infinity, поэтому есть пробелы между точно представленными числами, заполненными числами, только приближены.

К сожалению, 0,3 сидит в промежутке.

808
задан Cees Timmerman 4 February 2016 в 15:27
поделиться

19 ответов

Просто создайте обертку <div> с процентным значением для padding-bottom, например:

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}
<div></div>

It приведет к <div> с высотой, равной 75% от ширины ее контейнера (соотношение сторон 4: 3).

Это зависит от того, что для заполнения:

Процент вычисляется относительно ширины блока, содержащего сгенерированный блок [...] (источник: w3.org , основное внимание)

Значения нижнего поля для других форматов и 100% ширины:

aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

Размещение содержимого в div:

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

div.stretchy-wrapper {
  position: relative;
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

Вот демо и другое более подробно demo

1090
ответ дан Vadim Ovchinnikov 31 August 2018 в 18:40
поделиться

позволяет сказать, что у вас есть 2 divs div div - контейнер, а внутренний может быть любым элементом, который вам нужен для поддержания его отношения (img или iframe iframe или что-то еще).

html выглядит следующим образом:

<div class='container'>
  <div class='element'>
  </div><!-- end of element -->

позволяет утверждать, что соотношение «элемент»

=> 4 к 1 или 2 к 1 ...

css выглядит так:

.container{
  position: relative;
  height: 0
  padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/

}

.element{
  width : 100%;
  height: 100%;
  position: absolute; 
  top : 0 ;
  bottom : 0 ;
  background : red; /* just for illustration */
}

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

2
ответ дан aeid 31 August 2018 в 18:40
поделиться

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

Предположим, что у вас есть встроенное видео:

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

Затем вы можете разместить все это внутри div с классом «видео». Этот видеокласс, вероятно, будет жидким элементом вашего сайта, который сам по себе не имеет прямых ограничений по высоте, но при изменении размера браузера он будет меняться по ширине в соответствии с потоком веб-сайта. Это будет тот элемент, который вы, вероятно, пытаетесь получить во встроенном видео, сохраняя при этом определенное соотношение сторон видео.

Чтобы сделать это, я поместил изображение перед встроенным объектом в «видео» "класс div.

!!! Важная часть состоит в том, что изображение имеет правильное соотношение сторон, которое вы хотите сохранить. Кроме того, убедитесь, что размер изображения максимально высок, чем самый маленький, который вы ожидаете от видео (или того, что вы поддерживаете A.R.), чтобы получить на основе вашего макета. Это позволит избежать любых возможных проблем при разрешении изображения при его изменении в процентах. Например, если вы хотите сохранить соотношение сторон 3: 2, не просто используйте изображение 3px на 2px. Он может работать при некоторых обстоятельствах, но я не проверял его, и, вероятно, было бы неплохо избежать.

Вероятно, вы уже должны иметь минимальную ширину, как это определено для жидкостных элементов вашего веб-сайта. Если нет, рекомендуется сделать это, чтобы избежать измельчения элементов или перекрытия, когда окно браузера становится слишком маленьким. В какой-то момент лучше иметь полосу прокрутки. Наименьшая по ширине веб-страница должна быть где-то около ~ 600 пикселей (включая столбцы фиксированной ширины), поскольку разрешение экрана меньше, если только вы не имеете дело с телефонами. !!!

Я использую полностью прозрачный png, но на самом деле я не думаю, что это имеет значение, если вы сделаете это правильно. Например:

<div class="video">
     <img class="maintainaspectratio" src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

Теперь вы можете добавить CSS, похожий на следующее:

div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }

Убедитесь, что вы также удалили любое явное объявление высоты или ширины внутри объекта и вставлять теги, которые обычно поставляются с копированным / вставленным кодом встраивания.

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

Довольно круто, а?

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

25
ответ дан alex 31 August 2018 в 18:40
поделиться

Как указано в здесь на w3schools.com и несколько повторено в этом принятом ответе , значения заполнения в процентах (выделение мое):

Определяет заполнение в процентах от ширины содержащего элемента

Ergo, правильный пример чувствительного DIV, который поддерживает соотношение сторон 16: 9, выглядит следующим образом:

CSS

.parent {
    position: relative;
    width: 100%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML

<div class="parent">
    <div class="child">
        <div>Aspect is kept when resizing</div>
    </div>
</div>

Демонстрация на JSFiddle

9
ответ дан Community 31 August 2018 в 18:40
поделиться

Эллиот вдохновил меня на это решение - спасибо:

aspectratio.png - полностью прозрачный PNG-файл с размером вашего предпочтительного соотношения сторон, в моем случае 30x10 пикселей.

HTML

<div class="eyecatcher">
  <img src="/img/aspectratio.png"/>
</div>

CSS3

.eyecatcher img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/autoresized-picture.jpg);
}

Обратите внимание: background-size является функцией css3, которая может не работать с вашими целевыми браузерами. Вы можете проверить совместимость (например, на caniuse.com ).

13
ответ дан florianb 31 August 2018 в 18:40
поделиться

SCSS - лучшее решение в моем случае; используя атрибут data:

[data-aspect-ratio] {
    display: block;
    max-width: 100%;
    position: relative;

    &:before {
        content: '';
        display: block;
    }

    > * {
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}
[data-aspect-ratio="3:1"]:before {
    padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
    padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
    padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
    padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
    padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
    padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
    padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
    padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
    padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
    padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
    padding-top: 300%;
}

Например:

<div data-aspect-ratio="16:9"><iframe ...></iframe></div>

source

3
ответ дан gordie 31 August 2018 в 18:40
поделиться

Вы можете использовать svg. Сделайте положение контейнера / обертки относительным, сначала установите svg как статически, а затем разместите абсолютно позиционированное содержимое (сверху: 0; слева: 0; справа: 0; внизу: 0;)

Пример с 16: 9 пропорций:

image.svg: (может быть встроено в src)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>

CSS:

.container {
  position: relative;
}
.content {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
}

HTML:

<div class="container">
  <img style="width: 100%" src="image.svg" />
  <div class="content"></div>
</div>

Обратите внимание, что встроенный svg не работает, но вы можете urlencode svg и вставить его в атрибут img src следующим образом:

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />
6
ответ дан Maciej Krawczyk 31 August 2018 в 18:40
поделиться

Если вы хотите поместить квадрат в окно просмотра на любом портретном или альбомном представлении (насколько это возможно, но ничего не торчит снаружи), переключитесь между использованием vw / vh в ориентации portrait / landscape :

@media (orientation:portrait ) {
  .square {
    width :100vw;
    height:100vw;
  }
} 
@media (orientation:landscape) {
  .square {
    width :100vh;
    height:100vh;
  }
} 
1
ответ дан MoonLite 31 August 2018 в 18:40
поделиться

Чтобы добавить к ответу Web_Designer, <div> будет иметь высоту (полностью состоящую из нижней части), равную 75% от ширины ее содержащего элемента. Вот хорошее резюме: http://mattsnider.com/css-using-percent-for-margin-and-padding/ . Я не уверен, почему это так, но так оно и есть.

Если вы хотите, чтобы ваш div был шириной, отличной от 100%, вам понадобится другой обертывающий div, на котором нужно установить ширину:

div.ar-outer{
    width: 60%; /* container; whatever width you want */
    margin: 0 auto; /* centered if you like */
}
div.ar {
    width:100%; /* 100% of width of container */
    padding-bottom: 75%; /* 75% of width of container */
    position:relative;
}
div.ar-inner {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

Недавно я использовал что-то похожее на трюк с изображениями Эллиота, чтобы позволить мне использовать мультимедийные запросы CSS для обслуживания другого файла логотипа в зависимости от разрешения устройства, но все же масштабировать пропорционально, как это делал <img> (Я устанавливаю логотип в качестве фонового изображения на прозрачный .png с правильным соотношением сторон). Но решение Web_Designer избавит меня от HTTP-запроса.

13
ответ дан nabrown78 31 August 2018 в 18:40
поделиться

Если бы вся структура контейнера была основана на процентах, это было бы поведением по умолчанию, можете ли вы предоставить более конкретный пример?

Ниже приведен пример того, что я имею в виду, если вся ваша родительская иерархия была% основанная, любая регулировка окна браузера будет работать без каких-либо дополнительных js / css, это не возможно с вашим расположением?

<div style="width: 100%;">
   <div style="width: 50%; margin: 0 auto;">Content</div>
</div>
-1
ответ дан Nick Craver 31 August 2018 в 18:40
поделиться

Просто идея или взлома.

div {
  background-color: blue;
  width: 10%;
  transition: background-color 0.5s, width 0.5s;
  font-size: 0;
}

div:hover {
  width: 20%;
  background-color: red;
}
  
img {
  width: 100%;
  height: auto;
  visibility: hidden;
}
<div>
  <!-- use an image with target aspect ratio. sample is a square -->
  <img src="http://i.imgur.com/9OPnZNk.png" />
</div>

2
ответ дан Orland 31 August 2018 в 18:40
поделиться

На основе ваших решений я сделал несколько трюков:

Когда вы его используете, ваш HTML будет только

<div data-keep-ratio="75%">
    <div>Main content</div>
</div>

Чтобы использовать его таким образом, выполните: CSS:

*[data-keep-ratio] {
    display: block;
    width: 100%;
    position: relative;
}
*[data-keep-ratio] > * {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

и js (jQuery)

$('*[data-keep-ratio]').each(function(){ 
    var ratio = $(this).data('keep-ratio');
    $(this).css('padding-bottom', ratio);
});

И имея это, вы просто устанавливаете attr data-keep-ratio на высоту / ширину и все.

9
ответ дан pie6k 31 August 2018 в 18:40
поделиться

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

Я попытался связать их вместе, чтобы принести полностью портативное и многозначное решение ... Фокус в том, чтобы использовать для автоматического масштабирования изображения, но вместо этого использовать встроенный элемент svg использования предварительно обработанного изображения или любой формы второго HTTP-запроса ...

div.holder{
  background-color:red;
  display:inline-block;
  height:100px;
  width:400px;
}
svg, img{
  background-color:blue;
  display:block;
  height:auto;
  width:auto;
  max-width:100%;
  max-height:100%;
}
.content_sizer{
  position:relative;
  display:inline-block;
  height:100%;
}
.content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(155,255,0,0.5);
}
<div class="holder">
  <div class="content_sizer">
    <svg width=10000 height=5000 />
    <div class="content">
    </div>
  </div>
</div>

Обратите внимание, что я использовал большой значения в атрибутах ширины и высоты SVG, так как он должен быть больше максимального ожидаемого размера, поскольку он может только уменьшаться. Пример делает соотношение div 10: 5

1
ответ дан Salketer 31 August 2018 в 18:40
поделиться

Это улучшает принятый ответ:

  • Использует псевдоэлементы вместо разделителей обертки
  • Соотношение сторон основывается на ширине поля вместо его parent
  • Ящик будет растягиваться вертикально, когда содержимое станет более высоким

.box {
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #CCC;
}

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}

.fixed-ar-16-9::before {
  padding-top: 56.25%;
}
.fixed-ar-3-2::before {
  padding-top: 66.66%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-1-1::before {
  padding-top: 100%;
}

.width-50 {
  display: inline-block;
  width: 50%;
}
.width-20 {
  display: inline-block;
  width: 20%;
}
<div class="box fixed-ar fixed-ar-16-9">16:9 full width</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-3-2 width-20">3:2</div>
<div class="box fixed-ar fixed-ar-4-3 width-20">4:3</div>
<div class="box fixed-ar fixed-ar-1-1 width-20">1:1</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>

1
ответ дан Salman A 31 August 2018 в 18:40
поделиться

vw единиц:

Вы можете использовать блоки vw для ширины и высоты элемента. Это позволяет сохранить пропорции элемента в зависимости от ширины окна просмотра.

vw: 1 / 100th ширины окна просмотра. [ MDN ]

В качестве альтернативы вы также можете использовать vh для высоты видового экрана или даже vmin / vmax для использования меньшего / большего размера размеров просмотра (обсуждение здесь ).

Пример: соотношение сторон 1: 1

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}
<div></div>

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

aspect ratio  |  multiply width by
-----------------------------------
     1:1      |         1
     1:3      |         3
     4:3      |        0.75
    16:9      |       0.5625

Пример: 4x4 сетка квадратных divs

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div {
  width: 23vw;
  height: 23vw;
  margin: 0.5vw auto;
  background: gold;
}
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

Вот скрипка с этой демонстрацией , и вот


Поддержка браузера для модулей vh / vw - это IE9 + см. canIuse для получения дополнительной информации

331
ответ дан Shiladitya 31 August 2018 в 18:40
поделиться

Я столкнулся с этой проблемой довольно часто, поэтому я сделал для нее решение JS. Это в основном регулирует высоту domElement по ширине элемента по указанному вами соотношению. Вы можете использовать его следующим образом:

<div ratio="4x3"></div>

Имейте в виду, что поскольку он устанавливает высоту элемента, элемент должен быть либо display:block, либо display:inline-block.

https://github.com/JeffreyArts/html-ratio-component

2
ответ дан user007 31 August 2018 в 18:40
поделиться

Вы можете использовать флеш-макет (FWD).

https://en.wikipedia.org/wiki/Adaptive_web_design

Он будет масштабироваться и поддерживать макет, он немного сложный, но позволяет изменять размер страницы, не нажимая на такой контент, как (RWD).

Он выглядит отзывчивым, но он масштабируется. https://www.youtube.com/watch?v=xRcBMLI4jbg

Вы можете найти формулу масштабирования CSS здесь:

http: //plugnedit.com/pnew/928-2/

0
ответ дан user1410288 31 August 2018 в 18:40
поделиться

Я использовал новое решение.

.squares{
  width: 30vw
  height: 30vw

К основному соотношению сторон

.aspect-ratio
  width: 10vw
  height: 10vh

Однако это касается всего окна просмотра. Итак, если вам нужен div, который составляет 30% ширины видового экрана, вместо этого вы можете использовать 30vw, и, поскольку вы знаете ширину, вы будете использовать их по высоте с помощью модуля calc и vw.

-1
ответ дан web-tiki 31 August 2018 в 18:40
поделиться

Поскольку @ web-tiki уже показывает способ использования vh / vw, мне также нужен способ центрировать на экране, вот код фрагмента для портрета 9:16.

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateY будет удерживать этот центр на экране. calc(100vw * 16 / 9) ожидается высота для 9/16. (100vw * 16 / 9 - 100vh) - высота переполнения, поэтому pull up overflow height/2 будет удерживать ее на экране.

Для пейзажа и сохранения 16: 9 вы показываете use

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

Коэффициент 9/16 является легкостью для изменения, нет необходимости предопределять 100:56.25 или 100:75. Если вы хотите сначала обеспечить высоту, вы должны переключить ширину и высоту, например height:100vh;width: calc(100vh * 9 / 16) для изображения 9:16.

Если вы хотите адаптироваться для разных размеров экрана, вы также можете заинтересовать

  • background-size обложка / содержать Над стилем похож на содержащий, зависит от ширины: отношение высоты.
  • object-fit обложка / содержит для тега img / video
  • @media (orientation: portrait) / @media (orientation: landscape) Запрос мультимедиа для portrait / landscape на измените соотношение.
5
ответ дан wener 31 August 2018 в 18:40
поделиться