图像以半宽显示

Question

我正在完成一个FrontEnd项目，我正在使用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

阅读srcset： https ：//webkit.org/demos/srcset/

您缩小50％的原因是正常的，像素比率/密度2x，3x，4x等越高，图像显示的越小，因为显示器分辨率得到修复。

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

Answer 2

我终于找到了答案。

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

问题解决了。