'Resizing div to its container?

I have a square block of 100*100px, there is a container block that may be resized. I want to resize the inner block so it always be inside the parent without overflow and always square (to be resized dynamically)

Note: I want to maintain the square shape of the inner div

#child {
  height: 100px;
  width: 100px;
  background-color: red;
}
#par {
  height: 200px;
  width: 200px;
  border: 2px solid black;
}
<div id="par">
  <div id="child">
  </div>
</div>
htmlcss


Solution 1:[1]

If you want an element to be a square (ratio of 1:1) then just add padding-bottom: 100% to it. If you want that square to have content then the inner content of that square must be absolutely positioned.

body { width: 200px; }

.square {
  padding-bottom: 100%; /* 1:1 aspect ratio (square) */
  border:1px solid red;
  position: relative;
}
<div class="square"></div>

You can place the square in a container/parent but you did not say how overflowing should behave?

.parent {
  height: 200px;
  width: 80%;
  border: 1px dashed black;
}

.square {
  padding-bottom: 100%; /* 1:1 aspect ratio (square) */
  border:1px solid red;
  position: relative;
}

.square .inner {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  overflow: auto;
}
<div class="parent">
  <div class="child square">
    <div class="inner">responsive square 1:1</div>
  </div>
</div>

css square ratio preview

jsFiddle: https://jsfiddle.net/azizn/mheoqbnw/

Solution 2:[2]

what you want is this: http://marcj.github.io/css-element-queries/ element-queries, the future

Solution 3:[3]

Just give the #child element a max-height and max-width of 100%:

#child{
  height:100px;
  max-height:100%;
  width:100px;
  max-width:100%;
}

Solution 4:[4]

Try this

#par{
    width: 200px;
    height: 200px;
    border:2px solid black;
    overflow: hidden;
}

#par #child{
    position: relative;
    width: 50%;
    height: 50%;
    margin: auto;
    margin-top: 25%;
    background-color:red;
}

http://jsfiddle.net/voj2wsyb/

Solution 5:[5]

Give the child min, max and height 100% it's going to look to it's parent and with 100 % it's taking the same height

Solution 6:[6]

Here you are :-

.child
{
    height:100px;
    width:100px;
    background-color:red;}
.par
{
    position: relative;
    height:200px;
    width:200px;
    border:2px solid black;
} 
.par:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}
.par > .child{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
<html>
  <body>
<div class="par">
<div class="child">
</div>
</div>
    </body>
</html>

If it helps, mark the problem solved.

Solution 7:[7]

I use EQCSS, an element queries plugin that lets me grab values from JavaScript to use in my CSS. Here's a demo with a column 33% wide that has a square that will resize responsively inside it:

<section>
  <div></div>
</section>
<style>
  section {width: 33%;}
  @element 'div' {
    $this {
      width: auto;
      height: eval("clientWidth")px;
      background: red;
    }
  }
</style>
<script src=http://elementqueries.com/EQCSS.js></script>

In this snippet, the width: auto means it expands to fill its container. The eval('clientWidth') is inside of the element query, so it refers to this.clientWidth where the this is the element that matches the query. This means the height of our square will always be equal to its width! (a square).

Check it out: http://elementqueries.com

I also use this same technique to allow me to resize Youtube and Vimeo iframes according to their aspect ratio without needing a wrapper:

@element 'iframe' {
  $this {
    margin: 0 auto;
    width: 100%;
    height: eval("scrollWidth/(width/height)")px;
  }
}

Responsive video scaling demo: http://elementqueries.com/demos/video-scaling.html

Hope this helps!

Solution 8:[8]

There is now the CSS attribute aspect-ratio:

body { width: 200px; }

.square {
    border: 1px solid red;
    aspect-ratio: 1 / 1;
    width: 100px; /* <-- optional, this is only for the demo */
}

.not-a-square {
    border: 1px solid green;
    aspect-ratio: 2 / 1;
    width: 100px; /* <-- optional, this is only for the demo */
}
<div class="square"></div>
<div class="not-a-square"></div>

Support: https://caniuse.com/mdn-html_elements_img_aspect_ratio_computed_from_attributes

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Aziz
Solution 2 Diogo Castro
Solution 3 Shaggy
Solution 4
Solution 5 jelleB
Solution 6
Solution 7 innovati
Solution 8 unknown6656

Related Questions