图像以半宽显示

Question

I'm completing a FrontEnd project, and I'm using Bootstrap 3 for the grid system.

Now, I'm also using art direction using the picture element, but I have a problem with this images because, every time I added this source element: <source media="(min-width: 800px)" srcset="images/web-development.jpg 1x, images/web-development_2x.jpg 2x"> , the picture is displayed 50% of the size of the picture. Does anyone know why might this happen?

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

I've also tried like this and the same result happens

<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

Have a read on srcset: https://webkit.org/demos/srcset/

The reason you are getting 50% smaller is normal, the higher the pixel ratio / density 2x, 3x, 4x and so on, the smaller the image will display because monitor resolution is fix.

When you apply image with 1x solution will be the default dimension (eg 100px by 100px), when the resolution is doubled, in this case 2x you will need 200px by 200px to maintain the same size.

Answer 2

I finally found an answer.

I created my own class in my style.css, and instead of adding max-width: 100%; I added it width: 100%.

And the problem was solved.