Question

我使用viewheight和％widths将我的页面分成4个象限。这很有效。

我现在希望用a填充每个div，它可以响应地填充它的父div。分配宽度：100％的视频有点工作，但似乎有点棘手，不尊重应该折叠内容的媒体查询（这适用于除了以外的任何事情。）

另外，我无法让视频使用视频的最大高度。我的视频是16：9，而div的比例不同。如果视频需要缩放以填充，那将很好，但我不确定如何实现这一目标。

感谢您的帮助

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<style type="text/css">
    html, body {
        -webkit-font-smoothing: antialiased;
    }
    .grid__item {
        height:49vh;
        float:left;
    }
    .grid__half {
        width:50%;
    }
    .grid__quarter {
        width:25%;
    }
    @media only screen and (min-width: 320px) {
        .grid__item {
            height:16vh;
            background:#fff;
        }
        .grid__quarter {
            width:100%;
        }
        .grid__half {
            width:100%;
        }
    }
    @media only screen and (min-width: 480px) {
        .grid__item {
            height:32vh;
            background:pink;
        }
        .grid__half {
            width:100%;
        }
        .grid__quarter {
            width:25%;
        }
    video {
        top:0;
        left:0;

    }
    }
    @media only screen and (min-width : 768px) {
        .grid__item {
            height:49vh;
            background:#fff;
        }
        .grid__half {
            width:50%;
        }
        .grid__quarter {
            width:25%;
        }
    }
    @media only screen and (min-width : 992px) {
        .grid__item {
            height:49vh;
        }
        .grid__half {
            width:49%;
        }
        .grid__quarter {
            width:25%;
        }
    }   
    @media only screen and (min-width : 1200px) {
        .grid__item {
            height:50vh;
        }
        .grid__half {
            width:50%;
        }
        .grid__quarter {
            width:25%;
        }
    }

</style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="grid__item grid__half" style="">
            <video><source src="pong.mp4" type="video/mp4"></video>
        </div>
        <div class="grid__item grid__half">
            b
        </div>
    </div>
    <div class="row">
        <div class="grid__item grid__quarter">c</div>
        <div class="grid__item grid__quarter">d</div>
        <div class="grid__item grid__quarter">e</div>
        <div class="grid__item grid__quarter">f</div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">    </script>
</body>
</html>

Answer 1

使用少量信息（没有提供HTML），我建议你尝试使用这个：min-height: 50vh; min-width: 50vw。

用视频标签填充div

1 个答案: