Make square div fill parent at all time without losing its aspect ratio

Question

Lets say i have the following HTML:

<div class="parent">
  <div class="square-child"></div>
</div>

What i'm trying to accomplish is having the square-child fill out as much of its parent, without losing propertions, and staying centered at all time. I have made a sketch with the square-childbeing showed in red and parentbeing showed in green.

enter image description here

I was reading the following SO-question, but couldn't get it centered: Maintain the aspect ratio of a div with CSS

EDIT: Added fiddle https://jsfiddle.net/2bg1jzg3/2

You already linked the correct answer; It looks like the current question is how to centre an element horizontally and vertically? — feeela, May 26 '15 at 09:23
When i'm following the guide the square is overflowing the parent, instead of shrinking in height to fit the parent. — Mads K, May 26 '15 at 09:28
If the parent size is relative to the viewport, you may find an answer here: [Fit responsive square in viewport according to width and height](http://stackoverflow.com/questions/23630140/fit-responsive-square-in-viewport-according-to-width-and-height/23631436#23631436) otherwise, you will need JS to calculate the size of the child. — web-tiki, May 26 '15 at 09:43
Other question : what kind of content do you want to display in the child? — web-tiki, May 26 '15 at 09:45
@MadsK you just got muddled up it seems, you were using the good approach with `background-size:contain;` https://jsfiddle.net/2bg1jzg3/3/ — web-tiki, May 26 '15 at 09:50
@MadsK you don't need anything related to the padding technique you linked to in your question. `background-size:contain;` has that feature build in http://jsfiddle.net/2bg1jzg3/4/ — web-tiki, May 26 '15 at 09:56
Sorry if i'm not being clear. I'm trying to make it square so that i "crops" the background-image by using background-size:cover; background-position: center; — Mads K, May 26 '15 at 09:57
@MadsK ok I see, I missunderstood. I'll delete my comments as they aren't relevant but you should add that info in the question so it makes it clear for everyone — web-tiki, May 26 '15 at 10:14

Bojan Petkovski · Accepted Answer · 2015-05-26T10:21:49.883

Maybe something like this would help: http://jsfiddle.net/2bg1jzg3/5/

$(".visual").animate({
    width: "600px",
    height: "300px"
}, 2000, function () {
    // Animation complete.
});

.visual {
    background-color:lightblue;
    position:absolute;
    overflow:hidden;
    width:250px;
    height:600px;
}
.parent {
    width:auto;
    height:100% !important;
    position: relative;
    display: block;
}
.parent .square-child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;
    background-image: url('http://lorempixel.com/output/abstract-q-g-850-480-8.jpg');
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="visual">
    <div class="parent">
        <div class="square-child"></div>
    </div>
</div>

Cool, but the square doesn't fit, as you defined it's width 50% :( — Mads K, May 26 '15 at 10:23
I guess the aspect ratio and the width can be done with javaScript and then it will work :) — Bojan Petkovski, May 26 '15 at 10:24

score -2 · Answer 2 · answered May 26 '15 at 09:26

Try this Fiddle.

<div class="parent">
  <div class="square-child"></div>
</div>

CSS

.parent{
    width: 100%;
    background: #f00;   
    height: 100px;
}
.square-child{
    width: 50%;
    margin: 0 auto;
    background: #00FF63;
    height: 100%;
}

Make square div fill parent at all time without losing its aspect ratio

2 Answers2