圖像以半寬顯示

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

問題解決了。