Question

我有一段时间遇到这个问题了。我所做的一切使我的图像响应并包含在父元素中失败了。我的图像被截止，它们不居中，并缩放到较小的屏幕。此外，我的主页有一个左边距空间我似乎无法解决。我希望我的内容居中，并在小屏幕上正确缩放。我的全尺寸背景图片也没有在较小的屏幕上填满整个背景。任何帮助将不胜感激。

<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 */

和（min-device-width：375px）和（最大设备宽度：667px）和（-webkit-min-device-pixel-ratio：2）{

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */

和（min-device-width：414px）和（max-device-width：736px）和（-webkit-min-device-pixel-ratio：3）{

}

/* ----------- Galaxy S5 ----------- */

/* Portrait and Landscape */

和（设备宽度：360px）和（设备高度：640px）和（-webkit-device-pixel-ratio：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%;
}

Answer 1

首先，添加一个基本的box-sizing属性

*{box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

2）从#container中删除保证金

3）从身体中移除边距

4）响应img使用img{max-width: 100%;height: auto;}

网站内容截止＆amp;图像无响应移动网页设计

1 个答案: