HTML5/CSS3 make a square div, width is 100%, need height equals width

Question

I am using HTML5 and CSS3 to make a layout.

I need tiles on the page, which is a square div element. the tile is inside a bootstrap column, I need the width to be automatically match the column width, but I found it difficult to let the height = width, because width is a percentage value: 100%.

HTML:

...
<div class="col-md-2">
    <div class="tile tile-square tile-auto">
        ...
    </div>
</div>
...

CSS:

.tile-square{
    width: 100%;
    height: how to do this?
}

I am OK with jQuery/js solution, but I prefer using CSS3 to solve this alone. there is a "calc()" statement in CSS3, but I do not know if it can achive this functionality.

check these [link1](http://www.mademyday.de/css-height-equals-width-with-pure-css.html) [link2](http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout) — Pranav C Balan, Dec 09 '13 at 05:10
Take a look at this: http://siebennull.com/equal_width_height.html — Andrew, Dec 09 '13 at 05:12

score 2 · Answer 1 · answered Dec 09 '13 at 05:17

2

With pure CSS2.1, you can make a box preserve a 1:1 ratio by setting padding-top: 100% (since vertical paddings are calculated from the container width, not height). The comments to your question provide some links with examples.

answered Dec 09 '13 at 05:17

Ilya Streltsyn

13,076
2
37
57

score 2 · Answer 2 · answered Dec 09 '13 at 05:29

2

Done with jQuery

var x = $('.element').width();
$('.element').css(
    {'height': x + 'px'}
);

Demo on JSFiddle

answered Dec 09 '13 at 05:29

Cem

33
6

aug · Answer 3 · 2013-12-09T05:34:19.117

1

I believe you cannot do this with just CSS3. CSS simply does styling. You can achieve this with JQuery/JS though:

var width = $('div.tile-square').width();
$('div.tile-square').height(width + 'px');

Or you can do this (not as preferred):

$('div.tile-square').css('height', $('div.tile-square').css('width'));

JSFiddle: http://jsfiddle.net/7k8pp/3/

edited Dec 09 '13 at 05:34

answered Dec 09 '13 at 05:12

aug

11,138
9
72
93

in my opinion he should use .height() and .width() instead of .ccs('height') and .css('width') – Aditya Ponkshe Dec 09 '13 at 05:17
@AdityaPonkshe the only difference between those functions is one returns the value in `px` and one returns an actual number (see [here](http://stackoverflow.com/questions/13279555/csswidth-and-cssheight-vs-width-and-height)). For this situation, it does not really matter. – aug Dec 09 '13 at 05:20
I know the difference between them. In my opinion correct practice is to store width in a different variable and then use it as height. Your method produced many bugs for me in the past. – Aditya Ponkshe Dec 09 '13 at 05:24

score 1 · Answer 4 · edited Jun 20 '20 at 09:12

Late to the party, but still relevant. It's been mentioned that this can be achieved using pure CSS although without a comprehensive example.

To preserve the aspect ratio of any element, we can use padding-top (which is based on the width of the element). So if we set the width of an element to be 25% for example, setting the padding-top property to 25% will force the element to become a square.

Have a look at the example below:

.tile {  
  background: #369; float: left;
  width: 23%;
  margin: 1%;
  position: relative;
}
.tile-square {
  padding-top: 23%; /* 23% (.tile width) - 2% (top and bottom margin) */
  height: 0;
}
.tile__content {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  padding: 10px;
  color: #fff;
}
body {margin: 1%;}

<div class="tile tile-square tile-auto">
  <div class="tile__content">Tile 1</div>
</div>
<div class="tile tile-square tile-auto">
  <div class="tile__content">Tile 2</div>
</div>
<div class="tile tile-square tile-auto">
  <div class="tile__content">Tile 3</div>
</div>
<div class="tile tile-square tile-auto">
  <div class="tile__content">Tile 4</div>
</div>

There is an issue with this method...

Because we have used padding to force the height of the element to be the same as the width, if we then add content to .tile, the content added will seemingly appear at the bottom and the element will no longer be a square. To overcome this, we set the .tile element to be positioned relative and then add a second element (.tile__content) inside. We then position .tile__content absolutely so it sits over the area the padding occupies.

score 0 · Answer 5 · answered Dec 09 '13 at 05:10

0

I don't know the pure css method, but in jquery you can use $( document ).width();. It will return width and you can set it as height.

$( document ).width(); will return value in px.

answered Dec 09 '13 at 05:10

Aditya Ponkshe

3,840
4
39
58

HTML5/CSS3 make a square div, width is 100%, need height equals width

5 Answers5

There is an issue with this method...