How to make background image fit correctly inside a board without losing responsiveness

前端 未结 3 914
旧巷少年郎
旧巷少年郎 2021-01-06 20:36

I have code in which there is class box, i have given backgroundimage to class box box1.

my problem is that the im

3条回答
  •  醉梦人生
    2021-01-06 21:04

    I think you are tackling this the wrong way. I would instead extract the board element from the main background and use it as an element alone:

    html {
      background: #afffdc;
    }
    
    #container {
      position: fixed;
      bottom: 0;
      left: 100px;
      background: url(https://i.stack.imgur.com/CM15R.jpg) top/contain no-repeat;
      height: 50vh;
      width: 29vh;
      max-width: 20vw;
      max-height: 35vw;
    }
    
    .box {
      padding-top: 173%;
      background: url(https://picsum.photos/200/300) 50% 5%/86% 27% no-repeat;
    }

    Update

    Here is a transparent version

    html {
      background: linear-gradient(to right,pink, lightblue);
    }
    
    #container {
      position: fixed;
      bottom: 0;
      left: 100px;
      background: url(https://i.stack.imgur.com/ctB0T.png) top/contain no-repeat;
      height: 50vh;
      width: 29vh;
      max-width: 20vw;
      max-height: 35vw;
    }
    
    .box {
      padding-top: 173%;
      background: url(https://picsum.photos/200/300) 50% 5%/86% 27% no-repeat;
    }

提交回复
热议问题