CODEWITHSUNDEEP
jqueryhtmlcss
Edi Wang
Edi Wang

Reputation: 3637

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

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.

Upvotes: 2

Views: 3389

Answers (5)

Chris Spittles
Chris Spittles

Reputation: 15359

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.

Upvotes: 1

aug
aug

Reputation: 11714

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/

Upvotes: 1

Cem
Cem

Reputation: 33

Done with jQuery

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

Demo on JSFiddle

Upvotes: 2

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

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.

Upvotes: 2

Aditya Ponkshe
Aditya Ponkshe

Reputation: 3890

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.

Upvotes: 0

Related Questions