@ RWD

Fluid Image:フルードイメージ

ウェブページに画像を設置する際、<img>タグに幅と高さを指定して alt 属性に画像の説明を入れるのが制作の基本でした。しかし、レスポンシブWebデザインで幅が可変するレイアウトに画像を設置する場合、画像サイズを固定してしまうと柔軟にレイアウトすることができません。そこで編み出されたのが、「フルードイメージ」の手法です。

フルードイメージの記述例

fluid_img

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
header,
main,
footer{
  max-width: 960px;
  margin: 0 auto;
}
header {
  width: 100%;
  height: 100px;
  border: 5px solid #fff;
  background: #eaeaea;
}
main {
  overflow: hidden;
  width: 100%;
}
article {
  overflow: hidden;
  height: 100px;
  border: 5px solid #fff;
  background: #eaeaea;
}
aside {
  height: 100px;
  border: 5px solid #fff;
  background: #eaeaea;
}
footer {
  width: 100%;
  height: 100px;
  border: 5px solid #fff;
  background: #eaeaea;
}
img {
  max-width: 100%;
  height: auto;
}

/* 768px or more */
@media screen and (min-width: 768px) {
  article {
    float: left;
    width: 70%;
    height: 300px;
  }
  aside {
    float: right;
    width: 30%;
    height: 300px;
  }
}
</style>
</head>

<body>
<header>header</header>
<div id="container">
<main>
  <article>
    <img src="images/example_img.jpg">
  </article>
  <aside>aside</aside>
</main>
<footer>footer</footer>
</div>
</body>

</html>

demo

フルードメディアの記述例

fluid_media

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
header,
main,
footer{
  max-width: 960px;
  margin: 0 auto;
}
header {
  width: 100%;
  height: 100px;
  border: 5px solid #fff;
  background: #eaeaea;
}
main {
  overflow: hidden;
  width: 100%;
}
article {
  height: auto;
  border: 5px solid #fff;
  background: #eaeaea;
}
aside {
  height: 100px;
  border: 5px solid #fff;
  background: #eaeaea;
}
footer {
  width: 100%;
  height: 100px;
  border: 5px solid #fff;
  background: #eaeaea;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%; /*幅の 56.25% を高さとする設定*/
  padding-top: 100px; /*コンテンツの周りに表示されるインターフェースやコントロールの設定*/
  height: 0; /*古い IE のレイアウト用の指定*/
  overflow: hidden;
}
.video-container iframe {
  position: absolute; /*親要素のパディング領域に配置するために、絶対配置を指定*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 768px or more */
@media screen and (min-width: 768px) {
  article {
    float: left;
    width: 70%;
    height: auto;
  }
  aside {
    float: right;
    width: 30%;
    height: 406px;
  }
}
</style>
</head>

<body>
<header>header</header>
<main>
  <article>
    <div class="video-container">
      <iframe src="http://www.youtube.com/embed/PlEH6dKXfCU" frameborder="0" allowfullscreen></iframe>
    </div>
    </article>
  <aside>aside</aside>
</main>
<footer>footer</footer>
</body>

</html>

demo

padding-bottom: 56.25% はアスペクト比を算出してpadding設定します。
padding-topでもpadding-bottomでもどちらでもOKです。
HD動画(16:9)の場合は、100 / 16 * 9 = 56.25% となります。

Creating Intrinsic Ratios for Video – AList Apart/p>