0
私は、フルサイズの画像と責任ある高さのヘッダーを構築するためにFoundationを使用しようとしています。 CSSでこれを行うにはいくつかの方法がありますが、JavaScriptを使用する必要がありますか？私たちを手伝ってくれますか？応答のある高さの全幅の背景
のindex.html：
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<header id="page-header">
<div class="row">
<div class="background" data-interchange="[image/background.jpg, default],
[image/small-background.jpg, small],
[image/medium-background.jpg, medium],
[image/large-background.jpg, large],
[image/xlarge-background.jpg, xlarge]">
<h1 class="text-center">
<img data-interchange="[image/logo.png, (default)],
[image/small-logo.png, (small)],
[image/medium-logo.png, (medium)],
[image/large-logo.png, (large)],
[image/xlarge-logo.png, (xlarge)]" alt="Logo" />
<noscript>
<img src="image/logo.png" alt="Logo" />
</noscript>
</h1>
</div>
</div>
</header>
<section id="page-content">
<div id="services" class="row">
<div class="small-12 columns">
<h2 class="text-center">Title</h2>
<p>Text here</h2>
</div>
</div>
</section>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.css：
html, body {
height: 100%;
}
header#page-header {
height: 100%;
}
header#page-header > div.row {
height: 100%;
}
header#page-header div.background {
height: 100%;
width: 100%;
background-size: 100% auto;
background-repeat: no-repeat;
}
header#page-header div.background > h1 {
position: relative;
top: 50%;
transform: translateY(-50%);
}
app.js：
$(document).foundation();
感謝。
あなたはメディアクエリと '背景サイズに見たことがありますか？ – Joseph
はい、私はすでにこのプロパティをテストし、div全体を埋めました。それは問題ありませんが、私の最大の問題は、縦横比を背景から遠く離れたテキストなしで幅（100％）に維持することによってサイズを設定する方法です。 – user3705884