Div Square, width size based on 100% height

后端 未结 7 2145
灰色年华
灰色年华 2020-12-03 15:15

I\'m trying to make a responsive square with the width size based on the (100%) height of the element. I believe it\'s impossible using only CSS.

The square width sh

相关标签:
7条回答
  • 2020-12-03 15:46

    Put it on your <script src="http://code.jquery.com/jquery-1.10.2.js"></script> and try with jquery:

    var totalHeight = 0;
    $("#yourContainer").children().each(function(){ 
        totalHeight += $(this).height;  
    });
    $("#yourContainer").css('width', totalHeight + 'px');
    
    0 讨论(0)
  • 2020-12-03 15:51

    I think this can be a good 'css only' solution for you. Cross browser working.

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

    Good to highlight this nice css rule:

    If the vertical paddings (and margins) are specified in percent (%) values the size is a percent of the width of the containing element.

    0 讨论(0)
  • 2020-12-03 15:53

    You can accomplish this using javascript. I'm assuming that you have a larger div container, in which you want a square, whose height is the same height as the container. The html is as follows:

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

    In javascript, you would simply do:

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

    Hope that helps

    0 讨论(0)
  • 2020-12-03 15:58

    Ok here the solution.

    <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/

    0 讨论(0)
  • 2020-12-03 16:01

    Since a square has same width and the height, and you know the width of the square, you can apply the same value to height.

    If you can use JS, then please try this: (jQuery)

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

    Try it here: http://jsfiddle.net/afzaal_ahmad_zeeshan/vpGUK/

    0 讨论(0)
  • 2020-12-03 16:03

    For a CSS-only solution (where you're sizing relative to the screen size), use viewport units. For example:

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

    (You may want to reduce it to 98 units to eliminate scrolling)

    Works great for divs that need to take up a precise proportion of screen space.

    JSFiddle here.

    0 讨论(0)
提交回复
热议问题