html - 图像以半宽显示

Question

我正在完成一个前端元素，我正在为网格系统使用 Bootstrap 3。

现在，我也使用图片元素进行艺术指导，但我对这些图像有疑问，因为每次我添加此源元素时:<source media="(min-width: 800px)" srcset="images/web-development.jpg 1x, images/web-development_2x.jpg 2x"> , 图片显示为图片大小的 50%。有谁知道为什么会发生这种情况？

<section class="row">
<div class="col-md-12">
<picture>
<source media="(min-width: 800px)" srcset="images/web-development.jpg 1x, images/web-development_2x.jpg 2x">
<source media="(max-width: 799px)" srcset="images/web-development-small_1x.jpg 1x, images/web-development-small_2x.jpg 2x">
<img src="images/web-development.jpg" class="img-responsive center-block" alt="Common desktop of a developer">
</picture>
</div>
</section>

我也试过，结果一样

<section class="row">
<div class="col-md-12">
<picture>
<source media="(max-width: 799px)" srcset="images/web-development-small_1x.jpg 1x, images/web-development-small_2x.jpg 2x">
<img src="images/web-development.jpg" srcset="images/web-development.jpg 1x, images/web-development_2x.jpg 2x" class="img-responsive center-block" alt="Common desktop of a developer">
</picture>
</div>
</section>

Answer 1

我终于找到了答案。

我在 style.css 中创建了自己的类，而不是添加 max-width: 100%;我添加了宽度:100%。

然后问题就解决了。