CODEWITHSUNDEEP
htmlcss
mshwf
mshwf

Reputation: 7449

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>

Upvotes: 1

Views: 1687

Answers (8)

unknown6656
unknown6656

Reputation: 2963

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

Upvotes: 0

innovati
innovati

Reputation: 523

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!

Upvotes: 0

Diogo Castro
Diogo Castro

Reputation: 75

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

Upvotes: 2

Gaurav Mahindra
Gaurav Mahindra

Reputation: 432

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.

Upvotes: 0

Aziz
Aziz

Reputation: 7783

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/

Upvotes: 3

jelleB
jelleB

Reputation: 183

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

Upvotes: 0

WitVault
WitVault

Reputation: 24130

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/

Upvotes: 0

Shaggy
Shaggy

Reputation: 6796

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

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

Upvotes: 0

Related Questions