Question

我无法在我的nab条下方获取此横幅图像以适应右侧并且还响应屏幕宽度。似乎我用来设置横幅背景图像的div是重复的，或者这里的东西是屏幕截图...

这是两次相同的图像。

这是我的代码：

＆＃13;

<!DOCTYPE html>
<html>
	<head>
    <title>Vector Games</title>
    <meta charset="utf-8"/>
    <link rel="shortcut icon" href="favicon.png" />
    <link rel="stylesheet" type="text/css" href="homecss.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <head>
    <style>
body{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}
header{
	background-image: url('cubes.png');
	width: 100%;
	padding: 15px 0;
	color: #49ac6f;
	text-align: center;
	font-size: 20px;
}
a{
	text-decoration: none;
	color: inherit;
}
nav ul{
	background-color: #a2a2a2;
	overflow: hidden;
	color: white;
	padding: 0;
	text-align: center;
	margin: 0;
	-webkit-transition: max-height .4s;
	-ms-transition: max-height .4s;
	-moz-transition: max-height .4s;
	-o-transition: max-height .4s;
	transition: max-height .4s;
}
nav ul li:hover{
	background-color: #49ac6f;
}
nav ul li{
	display: inline-block;
	padding: 20px;
}
.handle{
	width: 100%;
	font-size: 24px;
	background: #a2a2a2;
	text-align: right;
	box-sizing: border-box;
	padding: 15px 10px;
	cursor: pointer;
	display: none;
}
@media screen and (max-width: 650px){
	nav ul{
		max-height: 0;
	}
	.showing{
		max-height: 21em;
	}
	nav ul li{
		box-sizing: border-box;
		width: 100%;
		padding: 15px;
		text-align: left;
	}
	.handle{
		display: block;
	}
}
.banner{
	width: 100%;
	margin: 0 auto;
	padding-top: 1000px;
	background-image: url('banner1.png');
}
    </style>
    <body>

    
    
	<header>
        <h1>Vector Games</h1>
        <img src="logo.png" alt="logo"/>
    </header>
    
	<nav>
    	<ul>
        	<a href="#"><li>Home</li></a>
            <a href="#"><li>About</li></a>
            <a href="#"><li>Racing</li></a>
            <a href="#"><li>Arcade</li></a>
            <a href="#"><li>Strategy</li></a>
            <a href="#"><li>Puzzle</li></a>
            <a href="#"><li>Sport</li></a>
        </ul>
        <div class="handle">
        &#9776;
        </div>
    </nav>
    <div class="banner">
        
    </div>
    <script>
        $('.handle').on('click', function(){
            $('nav ul').toggleClass('showing');
        });
    </script>

    <div class="banner">
        
    </div>

    </body>
</html>

＆＃13;

哦，以及我如何才能使我的nab栏下方的图像响应，就像我需要它像导航栏一样可扩展。我需要设置媒体查询吗？

感谢，微量

Answer 1

在您的header样式中尝试：

background: url('cubes.png') no-repeat;

或

background-repeat: no-repeat;

对于您的自适应背景图片，您可以尝试：

background-size: contain;
background-position: center;

对于响应式图像元素，您可以执行以下操作：

img.responsive {
  width: 100%;
  height: auto;
  display: block;
}

Answer 2

尝试使用：

background-repeat：no-repeat;

在你的风格的标题部分。

w3schools.com

为什么这个DIV重复？

2 个答案: