本文介绍了无法使用具有固定高度和宽度响应的背景图像制作 div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如您所见,我正在尝试使 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%)
解决方案
你可以试试这样的:
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%)
解决方案
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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!