Html 图像以半宽显示

我正在完成一个前端项目，我正在为网格系统使用Bootstrap3

现在，我也在使用图片元素使用art direction，但是我对这些图片有一个问题，因为每次我添加这个源元素：

，图片显示的大小是图片大小的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>

---

读取srcset:

缩小50%的原因是正常的，像素比率/密度2x、3x、4x等越高，图像显示越小，因为监视器分辨率是固定的

---

当您使用1x解决方案应用图像时，将是默认尺寸（例如100px x 100px），当分辨率加倍时，在这种情况下，2x需要200px x x 200px来保持相同的大小。

我终于找到了答案

我用style.css创建了自己的类，并没有添加最大宽度：100%；我加了它的宽度：100%

---

问题解决了。

你能给我们看看你的CSS吗？嗨，Michael，我正在使用Bootstrap哪个类是。img响应的{最大宽度：100%；高度：自动}你认为可能是浏览器吗？但我已经在Safari和Chrome中测试过了，同样的问题。我转到DevTool，在控制台中检查$0.NaturalWidth，它告诉我是960px，不是，因为是1920px，我转到图像并获取信息，是1920px是的，但是当我从img标记或源标记（图片的子项）和src=“images/web-development_2x.jpg”中删除srcset时图像以1920的正常大小显示。谢谢你的回答