Image is shown in half width

I hope this finds you very well.

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

Thanks in advanced.

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 (e.g. 100px by 100px), when the resolution is doubled, in this case 2x you will need 200px by 200px to maintain the same size.

Your code if fine. This might because the box for the img elment width is smaller than the picture, you can resize the original picture with somthing like photoshop.

0 Comment

NO COMMENTS

LEAVE A REPLY

Captcha image