CSS、width:auto、height:autoとタグ属性の関係

Posted by dab | 2014年1月14日 火曜日 13:48:22 < HTML-CSS, コンピュータ >

<img>など、タグ属性にwidth、heightを指定できる要素には、CSSでもwidth、heightを指定すると、そのCSSの方が優先される。

<style>
img { width: 120px; height: 120px }
</style>
<img src="poster.png" width="300" height="300">

表示例:poster

width、またはheightの一方をautoにすると、アスペクト比を固定して拡大する。

<style>
img { width: 120px; height: auto }
</style>
<img src="poster.png" width="300" height="300">

表示例:poster

しかし、<video>では少々事情が違うようだ。

<style>
p { width: 100%; }
p video { width: 800px; height: auto; }
</style>

<p><video width="640" height="480" autobuffer poster="poster.png" controls>
<source src="video.mp4" type="video/mp4">
</video>
</p>

Safariではheight:autoにした場合は、CSSのwidthが優先され、アスペクト比を保ったままheightを拡大する

しかし、Safari Mobile(iPad、iPad mini)では、heightが150px固定となり、widthのみCSSが適用される。

表示例:video_height-auto

これに対応するには、posterをvideoの表示サイズで作成するか、height: autoではなく、自分でheightを計算して記述しなければならない。

親要素のサイズが確定している場合は<video>要素の指定はwidth: 100%、height: 100%でも良い。
特に全画面表示であれば、親要素、<video>要素ともにwidth: 100%; height: 100%指定ができる。
この場合は、<video>要素の表示サイズと動画の表示サイズが異なり、動画そのものはアスペクト比を固定したまま拡大される。

<style>
html, body, p { width: 100%; height: 100%;}
p video { width: 100% height: 100%; }
</style>

<p>
<video id="video" width="640" height="480" autobuffer poster="poster.png" controls>
<source src="lv1.mp4" type="video/mp4">
</video>
</p>

表示例:video_height-100

TrackBack URI : http://home.wi-wi.jp/blog/wp-trackback.php?p=1758

Leave a comment

:mrgreen: :neutral: :twisted: :shock: :smile: :???: :cool: :evil: :grin: :oops: :razz: :roll: :wink: :cry: :eek: :lol: :mad: :sad: