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％。

问题解决了。

图像以半宽显示

2 个答案: