如何在网格/画廊视图中将图像显示为自动响应大小？

Question

我使用一些资源创建了这个页面。 但我需要在输出图片中显示图像。 此外，侧边栏在加载页面时会自动打开，我需要默认关闭它。

我曾尝试在 JavaScript 中切换类，但关闭动画在页面加载后显示一次。 这很烦人。

 (function() { $('#msbo').on('click', function() { $('body').toggleClass('msb-x'); }); }());

 .navbar-default { margin-left: 200px; } .msb { width: 200px; background-color: #F5F7F9; position: fixed; left: 0; top: 0; right: auto; min-height: 100%; overflow-y: auto; white-space: nowrap; height: 100%; z-index: 1; border-right: 1px solid #ddd; } .msb .navbar { border: none; margin-left: 0; background-color: inherit; } .msb .navbar-header { width: 100%; border-bottom: 1px solid #e7e7e7; margin-bottom: 20px; background: #fff; } .msb .navbar-nav .panel { border: 0 none; box-shadow: none; margin: 0; background: inherit; } .msb .navbar-nav li { display: block; width: 100%; } .msb .navbar-nav li a { padding: 15px; color: #5f5f5f; } .msb .navbar-nav li a .glyphicon, .msb .navbar-nav li a .fa { margin-right: 8px; } .msb .nb { padding-top: 5px; padding-left: 10px; margin-bottom: 30px; overflow: hidden; } ul.nv, ul.ns { position: relative; padding: 0; list-style: none; } .nv { /*ns: nav-sub*/ } .nv li { display: block; position: relative; } .nv li::before { clear: both; content: ""; display: table; } .nv li a { color: #444; padding: 10px 25px; display: block; vertical-align: middle; } .nv li a .ic { font-size: 16px; margin-right: 5px; font-weight: 300; display: inline-block; } .nv .ns li a { padding: 10px 50px; } /*main content wrapper*/ .mcw { margin-left: 200px; position: relative; min-height: 100%; /*content view*/ } /*globals*/ a, a:focus, a:hover { text-decoration: none; } .inbox .container-fluid { padding-left: 0; padding-right: 0; } .inbox ul, .inbox li { margin: 0; padding: 0; } .inbox ul li { list-style: none; } .inbox ul li a { display: block; padding: 10px 20px; } .msb, .mnb { -moz-animation: slidein 300ms forwards; -o-animation: slidein 300ms forwards; -webkit-animation: slidein 300ms forwards; animation: slidein 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .mcw { -moz-animation: bodyslidein 300ms forwards; -o-animation: bodyslidein 300ms forwards; -webkit-animation: bodyslidein 300ms forwards; animation: bodyslidein 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } body.msb-x .mcw, body.msb-x .mnb { margin-left: 0; -moz-animation: bodyslideout 300ms forwards; -o-animation: bodyslideout 300ms forwards; -webkit-animation: bodyslideout 300ms forwards; animation: bodyslideout 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } body.msb-x .msb { -moz-animation: slideout 300ms forwards; -o-animation: slideout 300ms forwards; -webkit-animation: slideout 300ms forwards; animation: slideout 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } /* Slide in animation */ @-moz-keyframes slidein { 0% { left: -200px; } 100% { left: 0; } } @-webkit-keyframes slidein { 0% { left: -200px; } 100% { left: 0; } } @keyframes slidein { 0% { left: -200px; } 100% { left: 0; } } @-moz-keyframes slideout { 0% { left: 0; } 100% { left: -200px; } } @-webkit-keyframes slideout { 0% { left: 0; } 100% { left: -200px; } } @keyframes slideout { 0% { left: 0; } 100% { left: -200px; } } @-moz-keyframes bodyslidein { 0% { left: 0; } 100% { margin-left: 200px; } } @-webkit-keyframes bodyslidein { 0% { left: 0; } 100% { left: 0; } } @keyframes bodyslidein { 0% { margin-left: 0; } 100% { margin-left: 200px; } } @-moz-keyframes bodyslideout { 0% { margin-left: 200px; } 100% { margin-right: 0; } } @-webkit-keyframes bodyslideout { 0% { margin-left: 200px; } 100% { margin-left: 0; } } @keyframes bodyslideout { 0% { margin-left: 200px; } 100% { margin-left: 0; } } .video-list-thumbs>li { margin-bottom: 12px; } .video-list-thumbs>li>a { display: block; position: relative; background-color: #111; color: #fff; padding: 8px; border-radius: 4px; } .video-list-thumbs>li>a:hover { box-shadow: 0 2px 5px rgba(0, 0, 0, .3); text-decoration: none } .video-list-thumbs h2 { bottom: 0; font-size: 14px; height: 33px; margin: 8px 0 0; } .video-list-thumbs .glyphicon-play-circle { font-size: 60px; opacity: 0.6; position: absolute; right: 39%; top: 31%; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); transition: all 500ms ease-in-out; } .video-list-thumbs>li>a:hover .glyphicon-play-circle { color: #fff; opacity: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); } .video-list-thumbs .duration { background-color: rgba(0, 0, 0, 0.4); border-radius: 2px; color: #fff; font-size: 11px; font-weight: bold; left: 12px; line-height: 13px; padding: 2px 3px 1px; position: absolute; top: 12px; transition: all 500ms ease; } .video-list-thumbs>li>a:hover .duration { background-color: #000; } @media (min-width:320px) and (max-width: 480px) { .video-list-thumbs .glyphicon-play-circle { font-size: 35px; right: 36%; top: 27%; } .video-list-thumbs h2 { bottom: 0; font-size: 12px; height: 22px; margin: 8px 0 0; } } body { background-color: #fff; font-size: 18px; letter-spacing: 0.01em; }

 <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <title>Video Visualizer</title> <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet"> </head> <body style="background-color: #f2f3f3;"> <nav class="mnb navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <div style="padding: 8px 0;"> <a href="#" id="msbo"><i class="ic fa fa-bars"></i></a> </div> </div> </nav> <div class="msb" id="msb"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="brand-wrapper"> <div class="brand-name-wrapper"> <a class="navbar-brand" href="#"> Video Visualizer </a> </div> </div> </div> <div class="side-menu-container"> <ul class="nav navbar-nav"> <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> <li><a href="#"><i class="fa fa-puzzle-piece"></i> Components</a></li> <li><a href="#"><i class="fa fa-heart"></i> Extras</a></li> </ul> </div> </nav> </div> <div class="mcw"> <div class="container"> <br> <ul class="list-unstyled video-list-thumbs row"> <li class="col-lg-3 col-sm-4 col-xs-6"> <a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Claudio Bravo, antes su"> <img src="https://images.pexels.com/photos/4111719/pexels-photo-4111719.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Barca" class="img-responsive" width="100%" height="100%" /> <h2>Claudio Bravo, antes su </h2> <span class="glyphicon glyphicon-play-circle"></span> <!-- <span class="duration">03:15</span> --> </a> </li> <li class="col-lg-3 col-sm-4 col-xs-6"> <a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Claudiocon el Barça en la Liga"> <img src="https://images.pexels.com/photos/1991933/pexels-photo-1991933.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Barca" class="img-responsive" width="100%" height="100%" /> <h2>Claudiocon el Barça en la Liga</h2> <span class="glyphicon glyphicon-play-circle"></span> <!-- <span class="duration">03:15</span> --> </a> </li> <li class="col-lg-3 col-sm-4 col-xs-6"> <a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Bravo, antesa"> <img src="https://images.pexels.com/photos/5593847/pexels-photo-5593847.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Barca" class="img-responsive" width="100%" height="100%" /> <h2>Bravo, antesa</h2> <span class="glyphicon glyphicon-play-circle"></span> <!-- <span class="duration">03:15</span> --> </a> </li> <li class="col-lg-3 col-md-4 col-sm-4 col-xs-6"> <a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Claudio la Liga"> <img src="https://images.pexels.com/photos/3029023/pexels-photo-3029023.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Barca" class="img-responsive" width="100%" height="100%" /> <h2>Claudio la Liga</h2> <span class="glyphicon glyphicon-play-circle"></span> <!-- <span class="duration">03:15</span> --> </a> </li> <li class="col-lg-3 col-md-4 col-sm-4 col-xs-6"> <a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Barça en la Liga"> <img src="https://images.pexels.com/photos/3016317/pexels-photo-3016317.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Barca" class="img-responsive" width="100%" height="100%" /> <h2>Barça en la Liga</h2> <span class="glyphicon glyphicon-play-circle"></span> <!-- <span class="duration">03:15</span> --> </a> </li> <li class="col-lg-3 col-sm-4 col-xs-6"> <a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Bravo Barça en la Liga"> <img src="https://images.pexels.com/photos/5255552/pexels-photo-5255552.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Barca" class="img-responsive" width="100%" height="100%" /> <h2>Bravo Barça en la Liga</h2> <span class="glyphicon glyphicon-play-circle"></span> <!-- <span class="duration">03:15</span> --> </a> </li> </ul> </div> </div> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel"></h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> </div> <div class="modal-body"> <video controls id="video1" style="width: 100%; height: auto; margin:0 auto; frameborder:0;"> <source src="" type="video/mp4"> </video> </div> </div> </div> </div> </body> </html>

实际的：

预期的：

Answer 1

您可以使用 flex-box flex-direction 并将其设置为 column。

.mcw .container ul {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      height: 100VH;
      align-content: flex-start;
     }

这将使项目沿着页面向下移动，您将需要调整高度以获得更多列。 但是正如您所看到的，它可以通过使用全屏和调整浏览器窗口的大小来工作。

您还需要覆盖一些引导程序类。 下面的那些不是真正需要的，也不需要被覆盖或取消设置，如图所示。

在这两个类中取消设置 flex。

.col-lg-3 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: unset;
  max-width: 25%;
}

.col-sm-4 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 33.333333%;
  flex: unset;
  max-width: 33.333333%;
}

 (function() { $('#msbo').on('click', function() { $('body').toggleClass('msb-x'); }); }());

 .navbar-default { margin-left: 200px; } .msb { width: 200px; background-color: #F5F7F9; position: fixed; left: 0; top: 0; right: auto; min-height: 100%; overflow-y: auto; white-space: nowrap; height: 100%; z-index: 1; border-right: 1px solid #ddd; } .msb .navbar { border: none; margin-left: 0; background-color: inherit; } .msb .navbar-header { width: 100%; border-bottom: 1px solid #e7e7e7; margin-bottom: 20px; background: #fff; } .msb .navbar-nav .panel { border: 0 none; box-shadow: none; margin: 0; background: inherit; } .msb .navbar-nav li { display: block; width: 100%; } .msb .navbar-nav li a { padding: 15px; color: #5f5f5f; } .msb .navbar-nav li a .glyphicon, .msb .navbar-nav li a .fa { margin-right: 8px; } .msb .nb { padding-top: 5px; padding-left: 10px; margin-bottom: 30px; overflow: hidden; } ul.nv, ul.ns { position: relative; padding: 0; list-style: none; } .nv { /*ns: nav-sub*/ } .nv li { display: block; position: relative; } .nv li::before { clear: both; content: ""; display: table; } .nv li a { color: #444; padding: 10px 25px; display: block; vertical-align: middle; } .nv li a .ic { font-size: 16px; margin-right: 5px; font-weight: 300; display: inline-block; } .nv .ns li a { padding: 10px 50px; } /*main content wrapper*/ .mcw { margin-left: 200px; position: relative; min-height: 100%; /*content view*/ } .mcw .container ul { display: flex; flex-direction: column; flex-wrap: wrap; height: 80VH; align-content: flex-start; } col-lg-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex:unset!important; max-width: 25%; } .col-sm-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: unset!important; max-width: 33.333333%; } /*globals*/ a, a:focus, a:hover { text-decoration: none; } .inbox .container-fluid { padding-left: 0; padding-right: 0; } .inbox ul, .inbox li { margin: 0; padding: 0; } .inbox ul li { list-style: none; } .inbox ul li a { display: block; padding: 10px 20px; } .msb, .mnb { -moz-animation: slidein 300ms forwards; -o-animation: slidein 300ms forwards; -webkit-animation: slidein 300ms forwards; animation: slidein 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .mcw { -moz-animation: bodyslidein 300ms forwards; -o-animation: bodyslidein 300ms forwards; -webkit-animation: bodyslidein 300ms forwards; animation: bodyslidein 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } body.msb-x .mcw, body.msb-x .mnb { margin-left: 0; -moz-animation: bodyslideout 300ms forwards; -o-animation: bodyslideout 300ms forwards; -webkit-animation: bodyslideout 300ms forwards; animation: bodyslideout 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } body.msb-x .msb { -moz-animation: slideout 300ms forwards; -o-animation: slideout 300ms forwards; -webkit-animation: slideout 300ms forwards; animation: slideout 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } /* Slide in animation */ @-moz-keyframes slidein { 0% { left: -200px; } 100% { left: 0; } } @-webkit-keyframes slidein { 0% { left: -200px; } 100% { left: 0; } } @keyframes slidein { 0% { left: -200px; } 100% { left: 0; } } @-moz-keyframes slideout { 0% { left: 0; } 100% { left: -200px; } } @-webkit-keyframes slideout { 0% { left: 0; } 100% { left: -200px; } } @keyframes slideout { 0% { left: 0; } 100% { left: -200px; } } @-moz-keyframes bodyslidein { 0% { left: 0; } 100% { margin-left: 200px; } } @-webkit-keyframes bodyslidein { 0% { left: 0; } 100% { left: 0; } } @keyframes bodyslidein { 0% { margin-left: 0; } 100% { margin-left: 200px; } } @-moz-keyframes bodyslideout { 0% { margin-left: 200px; } 100% { margin-right: 0; } } @-webkit-keyframes bodyslideout { 0% { margin-left: 200px; } 100% { margin-left: 0; } } @keyframes bodyslideout { 0% { margin-left: 200px; } 100% { margin-left: 0; } } .video-list-thumbs>li { margin-bottom: 12px; } .video-list-thumbs>li>a { display: block; position: relative; background-color: #111; color: #fff; padding: 8px; border-radius: 4px; } .video-list-thumbs>li>a:hover { box-shadow: 0 2px 5px rgba(0, 0, 0, .3); text-decoration: none } .video-list-thumbs h2 { bottom: 0; font-size: 14px; height: 33px; margin: 8px 0 0; } .video-list-thumbs .glyphicon-play-circle { font-size: 60px; opacity: 0.6; position: absolute; right: 39%; top: 31%; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); transition: all 500ms ease-in-out; } .video-list-thumbs>li>a:hover .glyphicon-play-circle { color: #fff; opacity: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); } .video-list-thumbs .duration { background-color: rgba(0, 0, 0, 0.4); border-radius: 2px; color: #fff; font-size: 11px; font-weight: bold; left: 12px; line-height: 13px; padding: 2px 3px 1px; position: absolute; top: 12px; transition: all 500ms ease; } .video-list-thumbs>li>a:hover .duration { background-color: #000; } @media (min-width:320px) and (max-width: 480px) { .video-list-thumbs .glyphicon-play-circle { font-size: 35px; right: 36%; top: 27%; } .video-list-thumbs h2 { bottom: 0; font-size: 12px; height: 22px; margin: 8px 0 0; } } body { background-color: #fff; font-size: 18px; letter-spacing: 0.01em; }

 <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <title>Video Visualizer</title> <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet"> </head> <body style="background-color: #f2f3f3;"> <nav class="mnb navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <div style="padding: 8px 0;"> <a href="#" id="msbo"><i class="ic fa fa-bars"></i></a> </div> </div> </nav> <div class="msb" id="msb"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="brand-wrapper"> <div class="brand-name-wrapper"> <a class="navbar-brand" href="#"> Video Visualizer </a> </div> </div> </div> <div class="side-menu-container"> <ul class="nav navbar-nav"> <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> <li><a href="#"><i class="fa fa-puzzle-piece"></i> Components</a></li> <li><a href="#"><i class="fa fa-heart"></i> Extras</a></li> </ul> </div> </nav> </div> <div class="mcw"> <div class="container"> <br> <ul class="list-unstyled video-list-thumbs row"> <li class="col-lg-3 col-sm-4 col-xs-6"> <a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Claudio Bravo, antes su"> <img src="https://images.pexels.com/photos/4111719/pexels-photo-4111719.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Barca" class="img-responsive" width="100%" height="100%" /> <h2>Claudio Bravo, antes su </h2> <span class="glyphicon glyphicon-play-circle"></span> <!-- <span class="duration">03:15</span> --> </a> </li> <li class="col-lg-3 col-sm-4 col-xs-6"> <a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Claudiocon el Barça en la Liga"> <img src="https://images.pexels.com/photos/1991933/pexels-photo-1991933.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Barca" class="img-responsive" width="100%" height="100%" /> <h2>Claudiocon el Barça en la Liga</h2> <span class="glyphicon glyphicon-play-circle"></span> <!-- <span class="duration">03:15</span> --> </a> </li> <li class="col-lg-3 col-sm-4 col-xs-6"> <a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Bravo, antesa"> <img src="https://images.pexels.com/photos/5593847/pexels-photo-5593847.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Barca" class="img-responsive" width="100%" height="100%" /> <h2>Bravo, antesa</h2> <span class="glyphicon glyphicon-play-circle"></span> <!-- <span class="duration">03:15</span> --> </a> </li> <li class="col-lg-3 col-md-4 col-sm-4 col-xs-6"> <a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Claudio la Liga"> <img src="https://images.pexels.com/photos/3029023/pexels-photo-3029023.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Barca" class="img-responsive" width="100%" height="100%" /> <h2>Claudio la Liga</h2> <span class="glyphicon glyphicon-play-circle"></span> <!-- <span class="duration">03:15</span> --> </a> </li> <li class="col-lg-3 col-md-4 col-sm-4 col-xs-6"> <a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Barça en la Liga"> <img src="https://images.pexels.com/photos/3016317/pexels-photo-3016317.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Barca" class="img-responsive" width="100%" height="100%" /> <h2>Barça en la Liga</h2> <span class="glyphicon glyphicon-play-circle"></span> <!-- <span class="duration">03:15</span> --> </a> </li> <li class="col-lg-3 col-sm-4 col-xs-6"> <a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Bravo Barça en la Liga"> <img src="https://images.pexels.com/photos/5255552/pexels-photo-5255552.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Barca" class="img-responsive" width="100%" height="100%" /> <h2>Bravo Barça en la Liga</h2> <span class="glyphicon glyphicon-play-circle"></span> <!-- <span class="duration">03:15</span> --> </a> </li> </ul> </div> </div> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel"></h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> </div> <div class="modal-body"> <video controls id="video1" style="width: 100%; height: auto; margin:0 auto; frameborder:0;"> <source src="" type="video/mp4"> </video> </div> </div> </div> </div> </body> </html>

这是一个示例预览