很长一段时间以来，我都希望能够更好地控制不同视口(viewport)上的图片。我不知道 <picture> html5 中的标记。
我正在使用 Bootstrap 3。但是使用那些 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>最佳答案
But does it make sense to use those Bootstrap and tag
恕我直言，这可能取决于您是否使用 CMS，它可以为您动态创建缩放图像/缩略图，以及您要加载到页面中的图像数量。
如果它只有几张图片并且您使用静态 html 进行编码，我将只加载一张图片并使用 Bootstrap 的 fluid-img 类来控制图像输出。否则，我认为按原样使用没有任何问题。
关于html - html5图片标签和Bootstrap如何结合使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51620739/