Pure CSS Solution - Square Elements? [duplicate]

Answer 1

I needed to achieve something similar today and had the same idea with the image. I wanted to check other possibilities and google led me here.

...you don't really need an image src. you can simply use a hash if you want a square. It saves a http request.

If you want to get different aspect ratio you should use a src though. If you want to have a ratio of 16:9 the image should be 16px wide and 9px high (go as small as possible)

---

Comparing both techniques (see other answers in this thread)

img vs. padding-bottom

Here's a fiddle to show how much more compatible the img version is (can easily handle pxvalue too (an interval will resize the "square" each second)

If you use percentage values both techniques can achieve the same result but the padding version does not need the extra markup ()

---

Conclusion:

Depending on the implementation each technique has it's pros and contras.

---

HTML

    

        
Hey blue you look totally squared
    
    

        
        
Hey red you seem off
    

CSS

.floater {
    font-size: 0;
}
.square {
    position: relative;
    display: inline-block;
    width: 100px;
    margin: 0 5px; 
}
.square_noImg {
    padding-bottom: 100px;
    background: red;
}
.square_img {    
    background: blue;
}
img{
    width: 100%;
    height: auto;
    border: 0;
    visibility: hidden;
}
.inner {
    position: absolute;
    top: 10%;
    right: 10%;
    bottom: 10%;
    left: 10%;
    background: white;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    padding: 10px 5px;
}