代码之家 › 专栏 › 技术社区 › MK-DK

如何同时使用HTML5图片标签和引导

twitter-bootstrap css html

MK-DK · 技术社区 · 7 年前

很长一段时间以来,我想在不同的视区中对图片有更多的控制。我不知道 <picture> HTML5中的标签。

我正在使用引导程序3。但是使用这些引导程序和 <图片> 一起标记?我看不到它在做我做的测试代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>TEMPLATE</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
</style>
<body>
<div class="container-fluid">
  <!-- Test row 1 -->
  <div class="row">
    <div class="col-sm-12">
      <picture>
        <source media="(min-width: 991px)" srcset="http://vouzalis.dk/1024.jpg">
        <source media="(min-width: 768px)" srcset="http://vouzalis.dk/991.jpg">
        <source media="(min-width: 650px)" srcset="http://vouzalis.dk/768.jpg">
        <source media="(min-width: 380px)" srcset="http://vouzalis.dk/380.jpg">
        <img src="http://vouzalis.dk/1024.jpg" alt="Test picture" style="width:auto;">
      </picture>    
    </div>
  </div>
  <!-- Test row 2 -->
  <div class="row">
    <div class="col-sm-6">
      <picture>
        <source media="(min-width: 991px)" srcset="http://vouzalis.dk/1024.jpg">
        <source media="(min-width: 768px)" srcset="http://vouzalis.dk/991.jpg">
        <source media="(min-width: 650px)" srcset="http://vouzalis.dk/768.jpg">
        <source media="(min-width: 380px)" srcset="http://vouzalis.dk/380.jpg">
        <img src="http://vouzalis.dk/1024.jpg" alt="Test picture" style="width:auto;">
      </picture>    
    </div>
    <div class="col-sm-6">
      <picture>
        <source media="(min-width: 991px)" srcset="http://vouzalis.dk/1024.jpg">
        <source media="(min-width: 768px)" srcset="http://vouzalis.dk/991.jpg">
        <source media="(min-width: 650px)" srcset="http://vouzalis.dk/768.jpg">
        <source media="(min-width: 380px)" srcset="http://vouzalis.dk/380.jpg">
        <img src="http://vouzalis.dk/1024.jpg" alt="Test picture" style="width:auto;">
      </picture>    
    </div>
  </div>
</div>
</body>
</html>