0
我已经有一段时间了这个问题。我所做的一切使我的图像响应并包含在父元素中失败。我的图像被截断，它们不居中，并放大到较小的屏幕。另外，我的主页有一个左边空白，我似乎无法修复。我希望我的内容居中，并在小屏幕上正确放大。我的全尺寸背景图片也不能填满整个小屏幕背景。任何帮助，将不胜感激。网站内容截止＆图像没有响应移动网页设计
<script src="jquery/jquery-3.0.0.min.js"></script>
<script>
$(document).ready(function() {
$('span.nav-btn').on('click', function(){
$('#menu').toggle();
})
$(window).resize(function(){
if ($(window).width() > 768) {
$('#navigation.showing').removeAttr('nav-btn');
}
});
});//end ready
</script>
</head>
<body>
<div class="bg">
<div id="container" class="homepage">
<div id="header">
<p align="center"><img src="images/headerlogo.png" alt="Lost Tourist Logo"
width="517" height="269"/> </p>
</div>
<div id="navigation">
<span class="nav-btn"></span>
<ul id="menu" class="showing">
<li> <a href="index.html"><img src="images/menubar.png" alt="menu bar icon"
width="122" height="118"/></a>
<p align="center">Home</p></li>
<li><a href="beers.html"> <img src="images/menubar.png" alt="menu bar icon"
width="122" height="118"/></a>
<p align="center">The Brews</p></li>
<li><a href="events.html"> <img src="images/menubar.png" alt="menu bar icon"
width="122" height="118"/></a>
<p align="center">Events</p></li>
<li> <a href="crew.html"><img src="images/Crew.png" alt="crew" width="122"
height="118"/></a>
<p align="center">Crew</p></li>
<li> <a href="contact.html"><img src="images/Payphone_menubar.png"
alt="contact" width="122" height="118"/></a>
<p align="center">Contact</p></li>
</ul>
</div>
</div>
</div>
</body>
</html>
我的CSS：
@charset "utf-8";
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image:url(images/CityScape.jpg);
height:100%;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
#container {
height: 900px;
width: 900px;
position: relative;
padding-bottom: 0px;
margin-top: auto;
margin-right: auto;
margin-bottom: 25px;
margin-left: auto;
}
#navigation ul li {
margin: 25px;
position: relative;
list-style-type: none;
float: left;
overflow: hidden;
}
#navigation ul li p {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
font-weight: bold;
color: #000;
margin: 5px;
}
#content {
position: relative;
overflow: hidden;
clear: both;
width: 900px;
height: auto;
background-color: #09F;
border: thin solid #000;
padding-bottom: 0px;
margin-bottom: 25px;
}
#content table {
background-repeat: repeat;
background-color: #06F;
width:550px;
}
#content table p {
text-align: inherit;
display: table-row;
vertical-align: middle;
}
#content img {
position: relative;
}
#content h1 {
padding: 5px;
}
#navigation {
clear: both;
height: auto;
width: auto;
margin: 0px;
}
#content p {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
margin: 5px;
}
#footer p {
margin: 5px;
}
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
font-weight: bold;
clear: both;
margin-bottom: 25px;
margin-top: 15px;
border: thin solid #000;
background-color: #09F;
}
#header img {
padding: 25px;
}
我给小屏幕CSS：
/*smart phones*/
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
和（最小 - 设备宽度：375px） 和（最大设备宽度：667px ） 和（-webkit-min-device-pixel-ratio：2）{
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
和（最小 - 设备宽度：414px） 和（最大设备宽度：736px） 和（-webkit分钟设备像素比：3）{
}
/* ----------- Galaxy S5 ----------- */
/* Portrait and Landscape */
和（设备-width：360像素） 和（设备的高度：640像素） 和（-webkit设备像素比：3）{
}
body, html {
height: 100%;
marging 0;
}
.bg {
background-image:url(images/CityScape.jpg);
height:100%;
width:100%;
background-repeat:no-repeat;
background-size:cover;
min-width:100%;
}
#container {
width: 100%;
height: 100%;
margin: auto;
padding:5px;
margin:0px;
}
#header img {
position: relative;
height: auto;
max-width: 100%;
max-height:100%;
overflow: hidden;
}
#navigation {
font-size:large;
height: auto;
width:100%;
float:none;
overflow:hidden;
margin:auto;
padding:10px;
}
#navigation ul {
padding: 0;
text-align:center;
}
#menu {
float:none;
margin:auto;
display:none;
width:100%;
max-width:360px;
position:relative;
list-style-type:none;
padding:0;
text-align:center;
}
.nav-btn {
width:100%;
background-color:#09F;
text-align:center;
box-sizing:border-box;
padding:15px 10px;
font-weight:bold;
font-size:large;
text-align:center;
cursor:pointer;
display:block;
height:100%;
}
.nav-btn:after {
content:url(images/mobilemenu.png);
}
#menu li {
width:100%;
font-size:large;
font-weight:bold;
background-color:#09F;
display:inline-block;
margin:0px;
border:#000 medium solid;
float:none;
overflow:hidden;
text-align:center;
vertical-align:top;
}
#menu img {
margin:0px;
padding:0px;
width:90px;
height:90px;
position:relative;
}
#navigation ul li {
margin: 0px;
width: 100%;
position: relative;
float: none;
overflow: hidden;
}
#menu li a {
width:100%;
display:block;
}
#content {
width:100%;
height:100%;
margin:auto;
padding:10px;
}
#content background img {
max-height:100%;
max-width:100%;
}
.socialmedia {
width:30px;
height:30px;
max-width:30px;
max-height:30px;
}
.bigfoot {
width:50px;
height:50px;
max-width:200px;
max-height:200px;
}
.mail {
max-height:110px;
max-width:110px;
}
#content img {
height:auto;
width:100%;
position:relative;
overflow:hidden;
margin:5px;
}
#content table, tbody, th, td, tr {
display:block;
width:100%;
height:auto;
min-height:100%;
min-width:100%;
}
#content table {
border-collapse: collapse;
width:auto
height: auto;
padding: 10px;
position: relative;
min-width:100%;
}
#content td {
min-width:100%;
min-height:100%;
display:inline-block;
margin:5px;
padding:5px;
position:relative;
width:auto;
}
#content table p {
display:block;
text-align:inherit;
vertical-align:middle;
max-width:100%;
}
#footer {
width:100%;
height:100%;
}
你能不能给我们一个链接，我们可以看到结果的一个例子删除保证金？这样回答可能会更容易。 – JoeMecPak
是的，我的网站：http://www.losttouristbrewing.com/ – gmm29