0

I have a div placed on the bottom-left corner of the browser window by using position: fixed. When the user resizes the window, I want the div to resize as well, but preserve the original aspect ratio.

CSS solutions only (or a confirmation that it cannot be done solely using CSS). I'm working in IE9+. I will accept any solution: div resizing by its width OR height.

There were many questions (with solutions) like mine, however none of them seem to provide a solution for when the div is using position: fixed. Their solutions must have position: absolute, or they don't work.

EDIT 1: Codepen live example here.

EDIT 2: This is how I want it to work, whilst still using position: fixed.

Community
  • 1
  • 1
Howie
  • 2,760
  • 6
  • 32
  • 60

2 Answers2

2

It's not entirely clear to me if you know the aspect ratio in advance -- if so, you can just use a variation of

#content:before {
content:'';
float:left;display:block;
width:0;
padding-top:80%; /*height= 80% of width */
}

possibly combined with a min-height for #container? (This is a streamlined variant of the accepted answer in your link.)

Community
  • 1
  • 1
Ulrich Schwarz
  • 7,598
  • 1
  • 36
  • 48
  • I've added the code to the codepen example but unfortunately it doesn't work :/ The rectangle is still resizing on both axes. – Howie Jun 12 '14 at 16:50
  • @Howie: well, if it changed in width and not in height, it would by definition not be keeping its (width-to-height) aspect ratio. – Ulrich Schwarz Jun 12 '14 at 17:05
  • Ah yes! I've just missed something in my code, now it's working fine. Thanks for the help :) – Howie Jun 12 '14 at 17:34
  • @Howie Can you let everyone know what has worked for you because there is still no exact answer. – Rupam Datta Jun 13 '14 at 03:39
  • 1
    Sure. The problem was with my setting the height. When I've removed the height property it worked nicely. – Howie Jun 13 '14 at 05:41
-1

Assuming you are looking for something where you will have a small div at the bottom right corner of your window and resizing the browser window will resize the small box.

HTML:

<div class="fixed-box">
    Something...
</div>

CSS:

.fixed-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 10%;
    height: 10%;
    background-color: #ccc;
}
Rupam Datta
  • 1,849
  • 1
  • 21
  • 36
  • does not preserve the aspect ratio – Howie Jun 12 '14 at 11:41
  • Ok. But what exactly are you looking to do. Because the link you shared answers your question relating to maintaing aspect ratio. – Rupam Datta Jun 12 '14 at 11:49
  • it does not when I replace the solution's `position: absolute` with `fixed`. It displays the div in the middle of the screen. – Howie Jun 12 '14 at 11:51
  • Ok. The reason could be when you are using `position:absolute` it is positioning relative to its parent which is `position:relative` but when you use `position:fixed` it is positioning relative to the window. The fact that it works with `position:absolute` is because it's parent takes the `padding-bottom: 75%` correctly. – Rupam Datta Jun 12 '14 at 11:55