当屏幕尺寸减小时自动调整图像尺寸

-2

我使用图像作为背景，它完全适合。当我尝试调整屏幕大小（手机/平板电脑大小）时，图像停留在后面，不像屏幕那样缩小 - 不会变得响应。我想改变这种效果，并使其响应并缩小尺寸屏幕。当屏幕尺寸减小时自动调整图像尺寸

查看附件。

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; 
}

来源

2017-05-25 drorAlfasi

不要设置'width'或'height'在你的CSS，而不是加上'背景重复：不重复; 背景尺寸：含有;背景位置：中心;' –

什么是这个方法的优点？ – drorAlfasi

这里有一些很好的答案。为什么不接受一个？ –

您还可以尝试在标题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; 
}

来源

2017-05-25 14:17:25 morganfens

尝试切换向上的宽度和高度使用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; 
}

来源

2017-05-25 14:06:50 trav

我在我的应用程序，但随后在“检验”改变了它，如果我改变了看法，以移动/平板电脑查看它变小，不适合屏幕为％。 – 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”会给你很多好的答案。

来源

2017-05-25 14:20:20

嗨，詹姆斯我做我的朋友，否则我就不会问这个问题。 – drorAlfasi

做过一些研究吗？ –

因为你使用的“不重复中心中心滚动”和我使用“固定不重复中心中心”。 –

当屏幕尺寸减小时自动调整图像尺寸

回答

相关问题