Question

我一直想在不同视口上更好地控制图片。我不知道html5中的<picture>标签。

我正在使用Bootstrap3。但是一起使用这些Bootstrap和<picture>标签是否有意义？我看不到它在我做的测试代码中正在做某事。

<!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>

Answer 1

但是使用那些Bootstrap和标签

恕我直言，这可能取决于您是否使用CMS来动态地为您创建缩放的图像/缩略图，以及要加载到页面中的图像数量。

如果只有几张图像并且您使用静态html进行编码，则只需加载一张图像，然后使用Bootstrap的fluid-img类控制图像输出。否则，按原样使用不会出现任何问题。

如何同时使用html5图片标签和Bootstrap

1 个答案: