Responsive perfect squares inside a fixed positioned div. could anyone help me?

问题

I have a fixed positioned div at the bottom of my web (oriented just for mobiles). Inside I have 5 links, and I would like these links to be perfect squares always but I want to avoid to use any fixed size so I'm trying always to use "%". These squares needs to be always distribute using the full width of the container.

html so simple:

<div class="container">
    <a href="#" class="facebook">                    
    </a>
    <a href="#" class="info">
    </a>
    <a href="#" class="contacto">
    </a>
    <a href="#" class="telefono">
    </a>
    <a href="#" class="galeria">
    </a>
</div>

and my css's so far:

.container {
    width:90%;        
    height:20%;
    position:fixed;
    bottom:5%;
    left:5%;
    overflow:hidden;
}
.container a {
    width: 18.4%;
    margin-right: 2%;
    height:100%;
    background-color: blue;
    float:left;

}
.container a:last-child {margin-right: 0;}

Here you have the jsfiddle: http://jsfiddle.net/7jJsf/3/

So, could it be possible to make the links perfect squares whatever width or height the browser have?

or, if maybe my aproach is not good enough, any other way to make it?

note: I think I could do it probably using a square img inside every link but I would love to avoid the use of innecesary images.

thanks in advance and excuse my english, hope the question is clear enough.

回答1:

I have already answered this issue here. This solution uses a dummy div and position: absolute; to make responsive elements that keep their aspect ratio. This is a CSS solution.

To adapt it to your situation, you can do this :

FIDDLE

HTML :

<div class="container">
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="facebook"></a>
    </div>
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="info"></a>
    </div>
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="contacto"></a>
    </div>
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="telefono"></a>
    </div>
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="galeria"></a>
    </div>
</div>

CSS :

.container {
    width:90%;
    position:fixed;
    bottom:5%;
    left:5%;
}
.container .wrap {
    float:left;
    position: relative;
    width: 30%;
    margin-right:1%;
    width: 18.4%;
    margin-right: 2%;
    height:100%;
    float:left;
}
.container .dummy {
    margin-top: 100%;
}

.container a {
    display:block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: blue;
}
.container>div:last-child {
    margin-right: 0;
}

回答2:

I would set the width and height to the viewport width (a percentage of the viewport width) like this:

width:16vw;
height:16vw;

Your fiddle

回答3:

Use this little trick

.container a {
    margin-right: 2%;
    background-color: blue;
    float:left;
    position: relative;
    width: 18.4%;
    padding-bottom: 18.4%;
}

来源：https://stackoverflow.com/questions/22686478/responsive-perfect-squares-inside-a-fixed-positioned-div-could-anyone-help-me

标签

html

css

responsive-design