0
この9ページの単純なHTMLサイトは、複数のサイトで何年もテンプレートとして使用されています。それはその目的のために作られたものではありませんが、それは私が扱っているものです。サイト全体がオーバーホールを必要とし、応答性がないなど。コードをよく見れば、ページおよびバナー画像の幅プロパティに複数の矛盾があります。新しいものを作る長期的な計画があります。短期間に私は解決できなかった刺激的な奇妙なものを私に提示しています。シンプルなHTMLサイトのバナー画像が異なるページのサイズが異なるのはなぜですか？
デスクトップサイトやアンドロイドに必要に応じてバナー画像が表示されます。 iPhoneとiPadでは、9ページ中7ページにバナーが表示されます。 2つのページで、画像が画面の端を越えて広がります。同じルールがさまざまなページの各イメージに適用され、HTMLは同一であるように見えます。写真はすべて同じサイズと解像度です。
なぜ2ページが違うのですか？コードにエラーがありますが、同じエラーは各画像に適用されません。私はコード内に、他のページとは違った1ページに影響を与えるものは見当たりません。
幅、最大幅、自動、パーセントサイズ、ピクセルサイズ、画面サイズのすべてのバリエーションを試しました。誰も均一性を作り出していません。最初の2ページのイメージは、次の7ページとは常に異なります。私はバリデータを使ってコードを実行しており、各ページにはまったく同じエラーがあり、イメージサイズには関係しません。
<!DOCTYPE html>
<html class="no-js"><!-- InstanceBegin template="/Templates/oneclub_17.dwt" codeOutsideHTMLIsLocked="false" -->
<script src="https://use.typekit.net/doa5ucf.js"></script>
<script>try[{Typekit.load({ async: true });}catch(e){}</script>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- InstanceBeginEditable name="doctitle" -->
<title>BOKF ONE Club 2017-Welcome</title>
<!-- InstanceEndEditable -->
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css">
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<!-- InstanceParam name="Banner Image" type="URL" value="Images/banner_bokf_hmb17_welcome.jpg" -->
</head>
<body>
<div id="header">
<div id="header-top">
<div class="container">
<div class="header-content">
<div id="nav">
<ul>
<li><a href="index.html">WELCOME</a></li>
<li><a href="destination.html">DESTINATION</a></li>
<li><a href="hotel.html">HOTEL</a></li>
<li><a href="agenda.html">AGENDA</a></li>
<li><a href="activities.html">ACTIVITIES</a></li>
<li><a href="climate.html">CLIMATE</a></li>
<li><a href="questions.html">Q&A</a></li>
<li><a href="contact.html">CONTACT US</a></li>
<li><a href="register.html">REGISTER</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="banner-container">
<img src="Images/banner_bokf_hmb17_welcome.jpg" width="1460"> </div>
<div class="container">
<div id="photo-caption"><!-- InstanceBeginEditable name="Caption" -->Ritz-Carlton Half Moon Bay<!-- InstanceEndEditable --></div>
<div id="main-container">
<div id="content"><!-- InstanceBeginEditable name="Body" -->
<h1>Welcome</h1>
<p>Only 30 minutes south of San Francisco is a dramatic stretch of California coastline. Here, craggy and windswept bluffs tumble onto shores pounded by endless surf to postcard-worthy perfection. This is Half Moon Bay where we will celebrate our elite’s 2016 achievements as ONE Club, March 30–April 2, 2017.</p>
<!-- InstanceEndEditable --></div>
</div>
<div id="footer">
<p>Copyright © Wyndham Jade, LLC. All rights reserved.</p>
</div>
</div>
<script defer src="js/main.js"></script>
</body>
.container{
width: 1280px;
position: relative;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 0px;
padding-right: 25px;
padding-bottom: 0;
padding-left: 25px;
}
#header{
background-color: white;
height: auto;
}
#header-top{
position: fixed;
top: 0;
width: 100%;
background-color: #FFFFFF;
height: 50px;
line-height: 50px;
z-index: 2;
}
#header-top .container{
padding: 0;
}
.header-content{
text-transform:uppercase;
color: #ffffff;
font-size:12px;
}
#nav {
position: relative;
height: 50px;
background-image: url(../Images/oneclub_weblogo_2017.jpg);
background-repeat: no-repeat;
background-position: left center;
padding-top: 0px;
}
#nav ul {
position: absolute;
right: 0;
margin:0;
padding:0;
list-style:none;
line-height: 12px;
margin-top: 27px;
}
#nav li {
margin:0;
padding:0;
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
#home-banner {
text-align: center;
}
.banner-container{
height: 480px;
margin-top: 50px;
position: relative;
background-color: #FFF;
}
.banner-container img {
display: block;
width: 1460px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 480px;
}
.banner-container img land {
display: block;
width: 1460px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 480px;
}
#main-container {
width: 1280px;
}
はい、私は開発ツールを使用していました。 F12は女の子の親友です。私は、インラインの幅の制約を取り除き、 "ランド"ルールを削除し、幅ルールの他のすべての置換を作成しようとしました。画像に均一性はありませんでした。 私はレスポンシブサイトを構築する方法を知っています。私の経験では、ブートストラップなどを使用すると、HTMLとCSSではできないことが何も追加されません。 – LKPatricia
許可されていますが、そのようなツールを使用するとコントロールが削除されることがあります。私の経験に基づいて提供するだけです。考えることができる唯一のことは（HTMLとCSSは単純なので）何とかブラウザが画像サイズ自体を乱しているということです。 Mozillaは画像を「測定」する機能を提供しています。生の画像リソースを見て、それがどのサイズの画像であるかを見ることさえできます。ラッパーdivがどうにかして画像サイズを強制的に下げない限り、他に何ができるかはわかりません。彼らはそうではありません、ほぼ完全な均一性に見られるように –