将div缩放为背景图像的高度

Question

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 fitting to the background.

What's the best way to do this (if possible with pure CSS)?

Answer 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") 0 0 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) } 

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

Answer 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; }