Scale Div To Background-image Height

I've got a page using a background-image. background-size is set to cover. The content is just a heading and two buttons. I want the div to be always the proportional height fitti

Solution 1:

You can use one same image file for both background and inline, and set the inline image to visibility: hidden; (keep space), so the div can automatically resize based on the image size.

There is no way to detect the background image size with CSS.

.container {
  background: url("https://picsum.photos/600/150?image=0") 00 no-repeat;
  background-size: cover;
  position: relative;
  border: 1px solid red;
  overflow: hidden;
}

.image {
  visibility: hidden;
}

.title {
  position: absolute;
  width: 100%;
  background: rgba(255, 255, 255, .5)
}

<divclass="container"><divclass="title">Hello</div><imgclass="image"src="https://picsum.photos/600/150?image=0"></div>

Solution 2:

know this is old thread but stumbled upon it.

the following works for me if i know the dimensions of the image,

eg. 1220x404 => 1220/404 = 3.01980198 = 30.1980198

header { max-height: 404px; height: 30.1980198vw; }