Create square bound to a resizable rectangular containing box

Question

I have a rectangle area on my page that needs to be filled with a square in the center. This rectangle can be both horizontal and vertical. This means that the plethora of existing questions based on making a square from just the width of a containing box don't work. ^{[1] [2]}

This square can also change dynamically and this approach doesn't resize the square. I'd also like to not use JavaScript or JQuery if possible. This is the only thing that I'd use JQuery for.

Below you can see what the code should do at the beginning, but when you resized the box it doesn't resize the square.

/* based on https://stackoverflow.com/a/5445536*/
$('.body').resizable();
var containingBlock = $('.box-rect');
var cmin = Math.min(containingBlock.width(), containingBlock.height());

$('#box-square').css({
  'height': cmin+'px',
  'width': cmin+'px'
});

.body{
  width: 200px;
  height: 100px;
}

.box-rect {
  width: 100%;
  height: 100%;
  min-width: 50px;
  min-height: 50px;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* example bounding box */
  border: 1px solid gray;
}

.box-square {
  width: 50px; /* min(box-rect.height, box-rect.width) */
  height: 50px; /* box-rect min */
}

/*
The following is using a mix between the following two answers:
https://stackoverflow.com/a/6615994
https://stackoverflow.com/a/20117454
*/
.box-reset {
  position: relative;
  height: 100%;
  width: 100%;
}

.box-reset:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.box {
  position:  absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  /* example gray box */
  height: 100%;
  background-color: gray;
}

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class='body'>
  <div class="box-rect">
    <div class="box-square">
      <div class="box-reset">
        <div class="box">
          Not working at all
        </div>
      </div>
    </div>
  </div>
</div>
<br />
<div class='body'>
  <div class="box-rect">
    <div class="box-square" id="box-square">
      <div class="box-reset">
        <div class="box">
          Fills to the bounds of the rectangle on load.
        </div>
      </div>
    </div>
  </div>
</div>

To be completely clear:

The first example above doesn't resize the gray square at all.
The second example resizes the gray square to the bound of the rectangle. (What I want)

However, it doesn't resize the gray square to the bound of the rectangle when resizing the containing block.

I want to resize the square to the bound of the rectangle. Like in the second example, when I resize the containing block.

I would prefer to do this all in pure CSS.

Xenio Gracias · Answer 1 · 2019-02-25T12:14:19.950

-1

Removed the static height and width that was getting applied from js and added width: 50%; and height: 50%; to .box-square

$('.box-rect').resizable();

.body{
  width: 400px;
  height: 200px;
}

.box-rect {
  width: 100%;
  height: 100%;
  min-width: 100px;
  min-height: 100px;
 
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* example bounding box */
  border: 1px solid gray;
}

.box-square {
    width: 100px;
    height: 100px;
 /* width: 100px;  min(box-rect.height, box-rect.width) */
 /* height: 100px;  box-rect min */
}

/*
The following is using a mix between the following two answers:
https://stackoverflow.com/a/6615994
https://stackoverflow.com/a/20117454
*/
.box-reset {
  position: relative;
  height: 100%;
  width: 100%;
}


.box {
    height: 100%;
    background-color: gray;
}

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class='body'>
  <div class="box-rect">
    <div class="box-square">
      <div class="box-reset">
        <div class="box">
        </div>
      </div>
    </div>
  </div>
</div>

edited Feb 25 '19 at 12:14

answered Feb 25 '19 at 05:19

Xenio Gracias

2,728
1
9
16

The gray area doesn't seem to be a square any longer… – 301_Moved_Permanently Feb 25 '19 at 09:02
@Peilonrayz you want the height and width to be same as the outer rec? – Xenio Gracias Feb 25 '19 at 10:28
check the answer now – Xenio Gracias Feb 25 '19 at 10:37
can you please add a screenshot of what you are expecting, – Xenio Gracias Feb 25 '19 at 10:39
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/188986/discussion-between-xenio-gracias-and-peilonrayz). – Xenio Gracias Feb 25 '19 at 10:40
you want that inner box to be at the center?? and what should happen when the outer div size is deceased the? – Xenio Gracias Feb 25 '19 at 10:48
@Peilonrayz I'm still not sure of what you want. But i created this according too my understanding. thanks – Xenio Gracias Feb 25 '19 at 10:53
1). when the page loads the square should be in the center. 2)when the the rectangle is resized the square should fit the rectangle meaning.. square will become rect??.. or it should remain as square but the gap between the square and rectangle should reduce??. – Xenio Gracias Feb 25 '19 at 12:15
what's wrong in my current example??.. gray square is not overflowing the rectangle – Xenio Gracias Feb 26 '19 at 04:58

score -1 · Answer 2 · answered Feb 25 '19 at 09:57

You may look at the jQuery example. It's better to understand how it worked. I made a similar example on jsfiddle.

* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
  }
  #resizable { 
    display:flex;
    justify-content:center;
    align-items:center;
    width: 150px; 
    height: 150px; 
    min-width:100px;
    min-height:100px;
  }

  #resizable h3 {
    display:flex;
    justify-content:center;
    align-items:center;
    height: 100px;
    width: 100px;
    text-align:center;
  }

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Resizable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#resizable" ).resizable();
  } );
  </script>
</head>
<body>
<div id="resizable" class="ui-widget-content center-center">
  <h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>

<!-- Reference link https://jqueryui.com/resizable/ -->

@Peilonrayz You code contained jQuery. I'd like to know how do you resize without js code? — Joseph, Feb 25 '19 at 11:42
It's unnecessary to put jQuery code on your post. I misunderstand what you ask for. — Joseph, Feb 25 '19 at 11:58

Create square bound to a resizable rectangular containing box

2 Answers2