0

私が望むのは、背景ビデオが縦方向（y）に画面に収まり、比率よりも小さい場合は横方向（x）にトリミングされることです。現在のように、誰かが細長いブラウザーで見ていると、ビデオの両側が縮小されて中央に配置されるのではなく、ビデオの半分が右側で切り取られます。または、全体をあらゆる方向に伸ばしてブラウザに合わせたいのですが、それについてすべてのページを検索しましたが、どのコマンドも機能していないようです...新しいコマンドが少ないかもしれませんが、できます見つからない...

私は必要なものを達成するために.lessファイルを編集していますが、ほとんどすべてのcssコマンドが必要なものを除いて機能しているようです.より新しい/より良いとは別に、少ないです。これが私が持っているものです。これまでに見つけた中で最高のものです。少なくとも小さくなると、中央に縮小します。

// Background
#rt-top-surround {
position: relative;
video {
    position: fixed;
    width: auto;
    height: 100%;
    min-width: 100%;
    -webkit-background-size: cover;  }
    -moz-background-size: cover;       } these do nothing at all
    -o-background-size: cover;         } neither does background-size: 100%;
    background-size: cover;          }
    .backface-visibility(hidden);
}

私が何をしても、アスペクト比を維持することを止めることはできません。フルスクリーンまたは背景ビデオを中央に配置するためのヘルプで十分です。前もって感謝します-スコット

(私はこの 2 日間でウェブサイトのプログラミング方法を独学で勉強しただけなので、あなたの言うことすべてを理解できないかもしれません。そのことを心に留めておいてください。しかし、それ以来、テンプレートからサイトをプログラミングして書き直しました。 ftp 上のすべてのファイルを調べ、css を読んで、できることを学びました。実際には、かなりの量を知っています)。

4

1 に答える 1

0

まず、CSS が無効です。#rt-top-surround が閉じられていないため、その下にあるものはすべて壊れています。

// Background
#rt-top-surround {
position: relative;
} /* <------ here! */

に関しては、これはビデオ要素background-size以外にのみ適用されます。background-imageあなたは単にあなたがwidth望むものに設定することができheight:autoます.これはデフォルトで適用されるため、アスペクト比でスケーリングされました.

jsフィドル

HTML

<video>
    <source src="http://www.quirksmode.org/html5//videos/big_buck_bunny.mp4" type="video/mp4"></source>
</video>

CSS

video {
    width:100%;
}
于 2013-03-30T09:30:45.343 に答える