【发布时间】：2018-02-13 02:14:49
【问题描述】：
这个问题我已经有一段时间了。我为使图像具有响应性并包含在父元素中所做的一切都失败了。我的图像被截断，它们没有居中，并缩放到较小的屏幕。另外，我的主页有一个我似乎无法修复的左边距空间。我希望我的内容居中，并在小屏幕上正确缩放。我的全尺寸背景图像也没有在较小的屏幕上填充整个背景。任何帮助将不胜感激。
<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-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%;
}
【问题讨论】：
-
你能给我们一个链接，我们可以看到结果的例子吗？这样回答可能更容易。
-
是的，我的网站：losttouristbrewing.com
标签： html css responsive-design