Квадрат Div, размер ширины на основе 100% высоты

Question

Я пытаюсь создать адаптивный квадрат с размером ширины, основанным на (100%) высоте элемента. Я считаю, что невозможно использовать только CSS.

Ширина квадрата должна быть равна высоте (100% большого контейнера. Большой контейнер - более 100% экрана). Соотношение должно быть ширина = высота, чтобы сохранить квадрат.

Answer 1

Хорошо, здесь решение.

<div id="square" style="background-color:black;height:100%">test</div>

$(window).ready(updateWidth);
$(window).resize(updateWidth);

function updateWidth()
{
var square = $('#square');
var size = square.height();

square.css('width',size);
}

http://jsfiddle.net/j372H/7/

Answer 2

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

.container {
  height: 150px;
  width: 100%;
  text-align: center;
  background: #acd;
}
     
.square {
  display: inline-block;
  height: 100%;
  background: #691;
}

<div class="container">
  <div class="square">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" height="100%">
  </div>
</div>

Answer 3

Взгляните... наимущество.

Это свойство делает создание квадратного div на основе высоты самым простым способом. Вот пример кода:

Вот несколько ссылок, которые помогут вам понять свойство соотношения сторон:

• https://css-tricks.com/almanac/properties/a/aspect-ratio/
• aspect-ratiohttps://developer.mozilla.org/en-US/docs/Web/CSS/соотношение сторон
• https://support.squarespace.com/hc/en-us/articles/115008538927

Answer 4

Я думаю, что это может быть хорошим решением для вас. Кросс-браузер работает.

http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares

Хорошо, чтобы выделить это хорошее правило CSS:

Если вертикальные отступы (и поля) указаны в процентах (%), то размер равен проценту ширины содержащего элемента.

Answer 5

Для решения, предназначенного только для CSS (когда вы определяете размер относительно размера экрана), используйте единицы просмотра. Например:

@media screen and (orientation:landscape) {
    .box{
        height: 100vh;
        width: 100vh;
    }
}
@media screen and (orientation:portrait) {
    .box{
        height: 100vw;
        width: 100vw;
    }
}

(Вы можете уменьшить его до 98 единиц, чтобы избежать прокрутки)

Прекрасно работает с элементами div, которые должны занимать точную пропорцию места на экране.

JSFiddle здесь.

Answer 6

Поскольку квадрат имеет одинаковую ширину и высоту, и вы знаете ширину квадрата, вы можете применить то же значение к высоте.

Если вы можете использовать JS, попробуйте следующее: (jQuery)

var wiDth = $('div').css('width'); // get width
$('div').css('height', wiDth); // apply that value to the height

Попробуйте это здесь: http://jsfiddle.net/afzaal_ahmad_zeeshan/vpGUK/

Answer 7

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

<div id="container">
  <div id="square" style="height:100%;">

  </div>
</div>

В javascript вы просто сделаете:

<script>
  var container = document.getElementById("container");
  var square = document.getElementById("square");

  square.style.width = container.style.height;

  window.onresize=function(){
    square.style.width = container.style.height;
  };
<script>

надеюсь, это поможет

Answer 8

Поместите это на свой <script src="http://code.jquery.com/jquery-1.10.2.js"></script> и попробуйте с jquery:

var totalHeight = 0;
$("#yourContainer").children().each(function(){ 
    totalHeight += $(this).height;  
});
$("#yourContainer").css('width', totalHeight + 'px');

Answer 9

Вы можете присвоить контейнеру ширину и высоту следующим образом

      .container{
      width: '100vh',
      height: '100vh',
}

Он создаст квадратный div со 100% высотой и шириной = высотой.