1

I'm trying to build an 'elastic' website in CSS and HTML; I want there to be 6 squares along the width of the screen; I have the width of the squares scaling to the screen size, but I want to keep my squares square. Is there any way I can set the height of my div's to the same size as the div width (which is being set off of a % value).

4

3 回答 3

3

See DEMO.

Basically, give the element the same value for the width and padding-bottom so that it will stay as a square as you scale the page.

.square {
    background-color: red;
    width:15%;
    height:0px;
    padding-bottom:15%;
    display: inline-block;
}

Read more about fluid squares here.

于 2013-05-09T17:53:32.683 回答
1

Yes, the most common solution is to use a 1px by 1px image and make it full width with a variable height:

Demo: http://jsfiddle.net/57xhg/1/

CSS: 

.wrap {
    background: red;
    margin: 0 auto;
    width: 100px;
}

.wrap img {
    width: 100%;
    height: auto;
}
于 2013-05-09T17:51:32.393 回答
1

You can do it by using background-repeat-x and background-repeat-y property by providing the elastic line you want to draw

于 2013-05-09T17:52:12.877 回答