search

ErikHen / PictureRenderer

Simplify the rendering of HTML Picture elements for ASP.Net. With support for responsive, lazy loaded images.
MIT License
4 stars 5 forks source link

Need help in media queries #15

Closed cogworks-infrastructure closed 1 year ago

cogworks-infrastructure commented 1 year ago

Hi, We are trying to get an HTML response as below with your plugin but we couldn't create the "1x, 2x" sizes in source files with it Can you help us please image

<picture>
    <source media="(min-width: 1440px)" srcset="/media/tytmj3of/web-header-darkb.jpg?rxy=2c0.23142480436991725&amp;width=1920&amp;height=584&amp;rnd=133330203507330000&amp;format=webp&amp;quality=80 1x, /media/tytmj3of/web-header-darkb.jpg?rxy=2c0.23142480436991725&amp;width=3840&amp;height=1168&amp;rnd=133330203507330000&amp;format=webp&amp;quality=80 2x" type="image/webp">
    <source media="(min-width: 768px)" srcset="/media/tytmj3of/web-header-darkb.jpg?rxy=2c0.23142480436991725&amp;width=1200&amp;height=464&amp;rnd=133330203507330000&amp;format=webp&amp;quality=80 1x, /media/tytmj3of/web-header-darkb.jpg?rxy=2c0.23142480436991725&amp;width=2400&amp;height=928&amp;rnd=133330203507330000&amp;format=webp&amp;quality=80 2x" type="image/webp">
    <source media="(min-width: 375px)" srcset="/media/tytmj3of/web-header-darkb.jpg?cc=2c0%2c0.07131845920029152%2c0&amp;width=768&amp;height=528&amp;rnd=133330203507330000&amp;format=webp&amp;quality=80 1x, /media/tytmj3of/web-header-darkb.jpg?cc=0.48653172261789%2c0%2c0.07131845920029152%2c0&amp;width=1536&amp;height=1056&amp;rnd=133330203507330000&amp;format=webp&amp;quality=80 2x" type="image/webp">
    <img class="event-page__imag header-block__image" srcset="/media/tytmj3of/web-header-darkb.jpg?rxy=0.7057628900729893%2c0.23142480436991725&amp;width=1920&amp;height=584&amp;rnd=133330203507330000&amp;format=webp&amp;quality=80 1x, /media/tytmj3of/web-header-darkb.jpg?rxy=0.7057628900729893%2c0.23142480436991725&amp;width=3840&amp;height=1168&amp;rnd=133330203507330000&amp;format=webp&amp;quality=80 2x" alt="Web Header Darkb" loading="eager" height="584" width="1920">
</picture>

cc: @sekmenhuseyin

ErikHen commented 1 year ago

Hi. I'm not sure that you actually want to do that 😉. Look at my sample picture profile for a Thumbnail image. Even though the picture width is always 150px, I specify that there should be two images, one 150px and one 300px. That way the browser can select the 300px image if the screen has a high pixel density. You define what the picture width is in different view-port widths, and then you define the image widths that should be available. Then its up to the browser to select the best image.

sekmenhuseyin commented 1 year ago

I've tried this code and get a slightly similar html code image image

ErikHen commented 1 year ago

Yes that is the correct behavior. 100w tells the browser that this is an image that is 100 pixels wide, and 200w tells the browser that this is an image that is 200 pixels wide. 150px tells the browser that the picture width always is 150px. The browser can now select which image it thinks fits the best. In your case it will always select the 200w image. But if you had had a 150w and 300w it probably would have selected 150w for a regular screen with pixel density 1x, and the 300w images for a mobile screen with pixel density 2x. There are a couple of links that explains the picture element more in the ReadMe.

cogworks-infrastructure commented 1 year ago

thanks