Square container with image and padding

How to make square on css

by Elena Shevchuk

HTML

<div class="box">
    <img src="http://i052.radikal.ru/1006/a8/8b60023d6143.jpg" alt="">
</div>

CSS

body {
    position: relative;
    width: 100%;
    height: 100%;
}
.box {
    position: relative;
    width: 26%;
    padding: 13% 0;
    border: 5px solid transparent;
    background: gray;
 }
img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}