0

I'm trying to have a div that scales height while keeping the aspect ratio on a responsive landing page. The reason is that I have a background image that needs to stay the same aspect ratio and fill the entire space of the div. If I used 'background-size:cover', it will clip some of the image. If I use 'background-size:100%', it will stretch the image. I don't care about the size of the div as long as the background-image is shown completely.

.myDiv {
  width: 100%;
  aspect-ratio: 1200/700;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<section class=myDiv "></section>

What happens is the height doesn't fit the aspect ratio, it is only as tall as the content.

enter image description here

The Hawk
  • 1,496
  • 6
  • 26
  • 43
  • 1
    I don't understand that how isn't it fit the aspect ratio. This is [my demo](https://jsfiddle.net/9wyfbvts/). Due to you did not post complete code about background and I can't see the problem so I use dummy image from other website. However I still don't see and don't understand your problem. – vee Apr 11 '22 at 15:17
  • My code appears to be correct, but it's not working. Could be something with Bootstrap? See image above. – The Hawk Apr 11 '22 at 15:32
  • Please tag your Bootstrap version. – isherwood Apr 11 '22 at 15:39
  • Your code seems to work fine. – isherwood Apr 11 '22 at 15:43
  • I think the original developer used Keen Themes, which I think is built on top of Bootstrap. – The Hawk Apr 11 '22 at 15:47

0 Answers0