質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

4319閲覧

トップ画像100vhの余白について。

icoder

総合スコア14

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

2クリップ

投稿2019/05/25 19:00

編集2019/05/25 19:21

前提・実現したいこと

top.mp4の背景余白を無くして画面いっぱいにしたいです。
100vhを実装したい。

発生している問題

右と下に余白ができる。
イメージ説明

該当のソースコード

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="wrapper"> <div class="video-wrap"> <video src="top.mp4" class="video" loop autoplay muted></video> </div> <div class="landing-text"> <h1>Video Landing Page</h1> <h3>Full Screen Video Background</h3> <a href="#" class="btn">Start Here</a> </div> </section> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus similique ratione hic. Eum rerum praesentium consequatur reiciendis odit expedita sunt aut doloremque velit neque repudiandae natus, sapiente eos nesciunt nulla?</p> </body> </html>

CSS
*{
margin: 0;
padding: 0;
}
.video-wrap{
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.landing-text{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #000;
text-align: center;
}
h1{
font-size: 60px;
}
h3{
font-size: 20px;
padding: 20px;
}
p {
text-align: center;
padding: 30px;
}
.btn{
text-decoration: none;
border: 1px solid #fff;
padding: 20px;
color: #fff;
display: inline-block;
border-radius: 5px;
font-weight: bold;
}
.btn:hover{
color: #000;
background: #fff;
}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2019/05/25 22:19

質問は編集出来ます。 各コードは、ヘルプ等を参考にして、マークダウン機能で「コードブロック」として提示してください。
guest

回答2

0

ベストアンサー

object-fit: fill;を使用します。
背景画像は指定されていないため
background-sizeなどは指定しても意味がないです。

width=device-widthからレスポンシブWebデザインのようですので
別途スマートフォン用のCSSで調整が必要になります。

CSS

1html, body { 2 width: 100%; 3 height: 100%; 4} 5.video-wrap { 6 width: 100%; 7 height: 100%; 8} 9.video-wrap > video { 10 width: 100%; 11 height: 100%; 12 object-fit: fill; 13}

投稿2019/05/25 23:36

yasutomi

総合スコア2937

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

icoder

2019/05/26 03:14

object-fit: fill; width: 100%; を試したら無事に実装できました。 このプロパティを知りませんでした。 ありがとうございました。 .wrapper .video-wrap video{ width: 100%; height: 100vh; background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; object-fit: fill; }
guest

0

提示のコードに、以下を追加してみてください。

CSS

1.video { 2 width: 100vw; 3 height: 100vh; 4}

投稿2019/05/26 02:18

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問