簡體   English   中英

使用固定高度和寬度的背景圖像使div響應困難

[英]Trouble making a div with a background-image with fixed height and width responsive

如您所見,當我最小化瀏覽器窗口時,我試圖使container具有background-image響應。

我嘗試過使用max-widthpercentagesbackground-size:cover和其他一些技巧,但是它們沒有起作用,或者使我的容器消失了。

泥料

section
  div(class='container')

上海社會科學院

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

您可以嘗試如下操作:

 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> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM