Pure CSS Solution - Square Elements

Pure CSS Solution - Square Elements?

It is actually possible to achieve it with this neat trick i found at
this blog

#square {
   width: 100%;
   height: 0;
   padding-bottom: 100%;
}

Hope that helps

How to style a div to be a responsive square?

Works on almost all browsers.

You can try giving padding-bottom as a percentage.

<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>

The outer div is making a square and inner div contains the content. This solution worked for me many times.

Here's a jsfiddle

Square div at center of the page of max size with pure css

Updated fiddle

You can do it using vmin unit.

.container {
    width: 100%;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
    background-color: yellow;
    text-align: center;
}

.box {
   background-color: #AAAAAA;
   width: 100vmin;
   height: 100vmin;
   margin: 0 auto;
}

<div class="container">
    <div class="box">  
    Stuff goes here...
    </div>
</div>

Square HTML canvas with pure CSS

You're going to have to use javascript to set the width and height.

Here's an example::

HTML:

<div id="main" role="main">
    <canvas id="respondCanvas" width="100" height="100">
        < !-- Provide fallback -->
    </canvas>
</div> 

CSS:

#main{
    display:block;
    width:100%;
} 

JS:

$(document).ready( function(){

//Get the canvas & context
var c = $('#respondCanvas');
var ct = c.get(0).getContext('2d');
var container = $(c).parent();

//Run function when browser  resize
$(window).resize( respondCanvas );

function respondCanvas(){
    c.attr('width', $(container).width() ); //max width
    c.attr('height', $(container).width() ); //set the height to the width to make a square

    //Redraw & reposition content
    var x = c.width();
    var y = c.height();             
    ct.font = "20px Calibri";

    ct.fillStyle = "#DDDDDD"; //black
    ct.fillRect( 0, 0, x, y); //fill the canvas

    var resizeText = "Canvas width: "+c.width()+"px";
    ct.textAlign = "center";
    ct.fillStyle = "#333333"; //white
    ct.fillText(resizeText, (x/2), (y/2) );
}

//Initial call
respondCanvas();
});

Fiddle:: http://jsfiddle.net/dp40Lbux/1/

Use CSS (and maybe JavaScript) to make an element be square (or maintain a specific aspect ratio)

I figured out how to do this without js, though you need to use a transparent image.

Set up a html structure like:

<div class="rect_container"><img class="rect_image" src="rect_image.png"/>
 <div class="rect">Your favorite content here</div>
</div>

Use a AxB transparent png for rect_image where AxB is the aspect ratio.

Meanwhile set up a stylesheet like:

.rect_container {width: 50%; position: relative;}
.rect_image {width: 100%; display: block;}
.rect {width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;}

The important thing here is taking advantage of the fact that images maintain their aspect ratio when resized in one direction. Meanwhile, we need a useable div, so we make the image display as block, wrap it in a div, and put an absolutely positioned div inside that. I distilled this code from something more complicated I actually tested. Works like a charm.

CSS Responsive Fluid Square (with scrollable content)

You can use vw, vh and vmin to scale the square:

Demo: http://jsfiddle.net/r9VQs/

CSS (changed part only):

.wrap {
    background: blue;
    margin: 0 auto;
    max-width: 90vh;
    max-height: 90vh;
    position:relative;
    text-align:center;
}

You can also use vmin (which gives better results but is less well supported) and forego the image:

Demo: http://jsfiddle.net/r9VQs/2/

CSS:

.wrap {
    background: blue;
    margin: 0 auto;
    width: 90vmin;
    height: 90vmin;
    position:relative;
    text-align:center;
}

vh, vw and vmin are units equivalent to 1% of their respective viewport dimensions (vh is viewport-height, vw is viewport-width and vmin is whichever has a smaller value).

Please see http://caniuse.com/#feat=viewport-units for browser support.

How to always center a flexible square in viewport with pure CSS?

I finally figured it out. The magic ingredients are the view-port units.

Given this html structure:

.l-table
  .l-table-cell
    .square

You can use this css (well actuall its scss, but you get the idea) to make it work

html,
body{
  height: 100%
}
l-table{
  background: orange;
  display: table;
  height: 100%; 
  width: 100%;
}
.l-table-cell{
  display: table-cell;
  vertical-align: middle;
  border: 2px solid black;
}
.square{
  background: red;
  margin: auto;
  @media (orientation:landscape) {
    width: 70vh;
    height: 70vh;
  }
  @media screen and (orientation:portrait) {
    width: 70vw;
    height: 70vw;
  }
}

http://codepen.io/johannesjo/pen/rvFxJ

For those who need it, there is a polyfill.

CSS sizing to fill parent, staying square

A solution in progress

thirtydot came up with a very clever technique that takes advantage of the fact that images with only one defined dimension scale proportionately, and he harnesses this to size the element. We now have a clock that can scale properly, but only if the viewport width is greater than the height, not the other way around:

http://jsbin.com/isixug

Likewise, if we change img and #clock to have a defined width, instead of a defined height, then we have a clock that can scale properly, but only if the viewport height is greater than the width:

http://jsbin.com/awucun

---

The solution

We can combine the two 'tricks' above, that each only work for one orientation, by using a media query for orientation, and specifying the right 'trick' depending on the viewport orientation. We now have a completely scalable clock, no matter what the viewport orientation or size:

http://jsbin.com/okodib

create a div square, and center it accordingly the view port using less

You Cannot Do What You Desire With Precompiled LESS

LESS is a CSS preprocessor. That means it processes the code to form it into CSS before the browser ever sees it; and as far as LESS is concerned, the browser does not exist. What that means is, 40% of the height of the browser window is totally unknown to LESS. All that it knows is 40%, having no idea what that will actually translate into for pixels at a later time.

You will either want to stick to javascript, or use extra html mark-up to get the squaring effect.

Client-Side Compiling (NOT Recommend for Production)

I need to stress the fact that client-side compiling is recommended only for development. If someone has javascript turned off, then they will get NO styling. And those that have it turned on are going to experience a slowdown in page loading.

Now, the reason you get an invalid type error is because the returned value needs to be made into a number that LESS understands (I think it is treating the returned value as a string). This can be easily done like so (see the changes to the @base assignment):

@base: (0.4 * unit(`window.innerHeight`, px));

#mytransform { 
   background-color:#ccc;
   height:@base;
   width:@base;
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-(@base/2);
   margin-left:-(@base/2);
 }

My CSS Output On One Run At less2css.org

#mytransform {
  background-color: #ccc;
  height: 243.60000000000002px;
  width: 243.60000000000002px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -121.80000000000001px;
  margin-left: -121.80000000000001px;
}

---

Related Topics