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 */
及び（MIN-デバイス幅：375px） と（MAX-デバイス幅：667px ） と（-webkit-min-device-pixel-ratio：2）{
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
及び（MIN-デバイス幅：414px） と（MAX-デバイス幅：736px） 及び（-webkit-MIN-デバイスピクセル比：3）{
}
/* ----------- Galaxy S5 ----------- */
/* Portrait and Landscape */
と（デバイス-width：360px） 及び（デバイスの高さ：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