Content inside of a div without braking the aspect ratio of a div

Question

Can anyone please explain me why am I getting scrolling bar when I put content inside the div below.

* {
  margin:0;
  padding:0;
}
div {
  top:0;
    position: relative;
    background: url("https://4.bp.blogspot.com/-k8IX2Mkf0Jo/U4ze2gNn7CI/AAAAAAAA7xg/iKxa6bYITDs/s0/HOT+Balloon+Trip_Ultra+HD.jpg") no-repeat;
    background-size: contain;
    padding-bottom: 56.25%;
}

<div>
  <br><br><br><br><br><br>
</div>

If I remove the br tags inside of the div - scroll bar removed as well.

Overflow: hidden - is not an option.

I want to be able use content inside of a div, but so the div will remain the aspect ratio - how can I achieve this, please?

do you need it to stop resizing before it starts to overflow or what? — NoOorZ24, Sep 28 '17 at 12:04
@krishnar My need is to remain the aspect ratio of the div with background image, put some content inside of this div **and** all that without having an extra space after this div, so the next divs will fit exactly where they should — lessismore, Sep 28 '17 at 12:07
@lessismore set min-width, min-height, max-width, max-height. This will maintain aspect ratio — krishnar, Sep 28 '17 at 12:08
@krishnar can you show me how this will maintain the aspect ratio of the entire div? Here an example: https://jsfiddle.net/06pwarta/ — lessismore, Sep 28 '17 at 12:19
@lessismore check my solution .Is that what you are looking for? — krishnar, Sep 28 '17 at 12:27

score 0 · Answer 1 · answered Sep 28 '17 at 12:17

Specify the width and height to keep the aspect ratio and add overflow-y:hidden; to remove the scroll bar.

<div>
  <br><br><br><br><br><br>
</div>

CSS

* {
  margin:0;
  padding:0;
}
div {
  top:0;
  width: 300px;
  height: 40px;
    position: relative;
    background: url("https://4.bp.blogspot.com/-k8IX2Mkf0Jo/U4ze2gNn7CI/AAAAAAAA7xg/iKxa6bYITDs/s0/HOT+Balloon+Trip_Ultra+HD.jpg") no-repeat;
    background-size: contain;
    padding-bottom: 56.25%;
    overflow-y:hidden;
}

Hope this helps :)

Why would I need to force it for 300x40? I need it to be responsive — lessismore, Sep 28 '17 at 12:28

score 0 · Accepted Answer · answered Sep 28 '17 at 12:24

0

How about this solution. Inside outer div place inner div with absolute position, because you don't want to lose proportion anyway. Inside inner div place content you want. jsfiddle

<div class="outer">
    <div class="inner">
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </div>
</div>

answered Sep 28 '17 at 12:24

Vladislav Stanic

795
8
13

Thanks! Just came across with this, the same one solution: https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css – lessismore Sep 28 '17 at 12:29

krishnar · Answer 3 · 2017-09-28T12:40:45.730

0

In this code I set min, max width and height so that width/height wont change whether content is too much or less.This will maintain aspect ratio

* {
  margin:0;
  padding:0;
}
div.bg {
  color: #f00;
  top:0;
  min-width: 200px;
  min-height: 300px;
  max-width: 200px;
  max-height: 300px;
  position: relative;
  background: url("https://4.bp.blogspot.com/-k8IX2Mkf0Jo/U4ze2gNn7CI/AAAAAAAA7xg/iKxa6bYITDs/s0/HOT+Balloon+Trip_Ultra+HD.jpg") no-repeat;
  background-size: cover;
  /*
  padding-bottom: 56.25%;
  */
}

<div class="bg">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>CONTENT
</div>
<div>ANOTHER CONTENT</div>

edited Sep 28 '17 at 12:40

answered Sep 28 '17 at 12:26

krishnar

2,537
9
23

I wish it could be true, as I don't like messing up with absolute positioning, but this doesn't keep the aspect ratio. And what is the story with min-max width-hight if it's the same value anyway? – lessismore Sep 28 '17 at 12:31
@lessismore no its not. you can set to whatever you want – krishnar Sep 28 '17 at 12:34
Can you show an example where it will meet the needs? – lessismore Sep 28 '17 at 12:38
@lessismore see my code. I update min,max values. check aspect ratio. it wont change whether you add or remove br – krishnar Sep 28 '17 at 12:41
@lessismore is that what you are looking for? – krishnar Sep 28 '17 at 12:57

Content inside of a div without braking the aspect ratio of a div

3 Answers3