当屏幕尺寸减小时自动调整图像尺寸
问题描述:
我使用图像作为背景,它完全适合。 当我尝试调整屏幕大小(手机/平板电脑大小)时,图像停留在后面,不像屏幕那样缩小 - 不会变得响应。 我想改变这种效果,并使其响应并缩小尺寸屏幕。当屏幕尺寸减小时自动调整图像尺寸
HTML:
<!-- Header -->
<header id="top" class="header">
<div class="text-vertical-center">
<h1>Test</h1>
<h3>The</h3>
<br>
<a id="show-panel" href="#" class="btn btn-dark btn-lg">Sign Up</a>
</div>
</header>
CSS:
/* Header */
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: url(../img/coffee.jpg) no-repeat center center scroll;
color: #ffffff;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
答
您还可以尝试在标题div上使用绝对位置并将边距设置为始终覆盖整个区域。我在这里根据你的代码做了一个例子。 https://codepen.io/morganfens/pen/NjJBJB
.header {
background: url(../img/coffee.jpg);
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
background-repeat:no repeat;
background-size:cover;
color: #ffffff;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
答
尝试切换向上的宽度和高度使用VW和VH,而不是%。此外,而不是使用滚动作为您的背景图像属性上的位置,使用固定。我试过了jsfiddle。
.header {
display: table;
position: relative;
width: 100vw;
height: 100vh;
background: url(http://lorempixel.com/1920/1080/food) no-repeat center center fixed;
color: #ffffff;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
+0
我在我的应用程序,但随后在“检验”改变了它,如果我改变了看法,以移动/平板电脑查看它变小,不适合屏幕为%。 – drorAlfasi
答
你可以使用这个CSS代码:
html {
background: url(img.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
从这里:https://css-tricks.com/perfect-full-page-background-image/
记住做一些研究,问问题之前!在google上快速搜索“css full background image”会给你很多好的答案。
不要设置'width'或'height'在你的CSS,而不是加上'背景重复:不重复; 背景尺寸:含有;背景位置:中心;' –
什么是这个方法的优点? – drorAlfasi
这里有一些很好的答案。为什么不接受一个? –