无法使用具有固定高度和宽度响应的背景图像制作 div [英] Trouble making a div with a background-image with fixed height and width responsive

问题描述

如您所见，我正在尝试使 container 在我最小化浏览器窗口时响应 background-image.

我尝试过使用 max-width 、percentages、background-size:cover 和其他一些技巧，但他们没有不行，否则他们让我的容器消失了.

哈巴狗

部分div(类=容器")

SASS

部分高度:100vh宽度:100vw背景:灰色.容器位置:绝对背景: url('https://www.triplejtours.com.au/wp-content/uploads/2016/02/Lake-Kununurra-reflections-Dylan-Lodge.jpg')背景重复:不重复背景位置:中心背景尺寸:封面高度:807px宽度:948px左:50%顶部:50%变换:翻译(-50%，-50%)

CodePen

解决方案

你可以试试这样的:

body {边距:0；}.容器 {高度:100vh；宽度:100vw；显示:弹性；/*使用flex轻松居中*/背景:灰色；}.container>div {背景: url('https://www.triplejtours.com.au/wp-content/uploads/2016/02/Lake-Kununurra-reflections-Dylan-Lodge.jpg');背景重复:不重复；背景位置:中心；/* 保持在居中的 div 内*/背景大小:包含；/*使用contain使图像在视觉上缩小*/宽度:100%；高度:100%；保证金:自动；/*居中div*/最大宽度:948px；/*图像宽度*/最大高度:807px；/*图像高度*/}

<div></div>

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

解决方案

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>

这篇关于无法使用具有固定高度和宽度响应的背景图像制作 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！