使用固定高度和宽度的背景图像使div响应困难

Question

As you can see, I'm trying to make container which a background-image responsive when I minimize my browser's window.

I've tried playing with max-width , percentages , background-size:cover and a few other tricks but they didn't work or they made my container disappear.

Pug

section
  div(class='container')

SASS

section
  height: 100vh
  width: 100vw
  background: gray
  .container
    position: absolute
    background: url('https://www.triplejtours.com.au/wp-content/uploads/2016/02/Lake-Kununurra-reflections-Dylan-Lodge.jpg')
    background-repeat: no-repeat
    background-position: center
    background-size: cover
    height: 807px
    width: 948px
    left: 50%
    top: 50%
    transform: translate(-50%,-50%)

CodePen

Answer 1

You can try something like this:

 body { margin: 0; } .container { height: 100vh; width: 100vw; display: flex; /*use flex to easily center*/ background: gray; } .container>div { background: url('https://www.triplejtours.com.au/wp-content/uploads/2016/02/Lake-Kununurra-reflections-Dylan-Lodge.jpg'); background-repeat: no-repeat; background-position: center; /*keep it center within the centred div*/ background-size: contain; /*use contain to make the image shrink visually*/ width: 100%; height: 100%; margin: auto; /*center the div*/ max-width: 948px; /*Image width*/ max-height: 807px; /*Image height*/ } 

 <div class="container"> <div></div> </div>