html - Understanding responsive images and device pixel ratio -

-

i'm trying implement responsive images on website using srcset , sizes. when testing on computer looks , works great. image downloaded next-largest image when compared current page width (page width of 500px retrieve 720px wide image). here's i'm using:

<img src="image-240w.jpg"     srcset="image-1140w.jpg 1140w,         image-940w.jpg 940w,         image-720w.jpg 720w,         image-480w.jpg 480w,         image-240w.jpg 240w"     sizes="(max-width: 1140px) 100vw, 1140px">

on phone confused. have nexus 5x 1920x1080 resolution screen device pixel ratio of 2.5. viewport meta added page (<meta name="viewport" content="width=device-width, initial-scale=1">) media queries respond expected--as if device on 400px wide (1080px/4 = 432px). support example below. 480px wide image which, expected, hangs past edge of page 48px. example b image 1140px wide larger 432px wide viewport. example c result of img tag above (and i'm aiming for).

comparison

at first, pleased worked. however, when viewing developer tools can see img tag srcset downloaded 1140px wide image. seems me 480px wide image (which barely larger 432px wide viewport) should have been selected. instead, image downloaded of 1080px wide screen.

why media queries respond expect them (acting if screen 432px wide) responsive images care image size matches real screen resolution? must have 2.5 device pixel ratio don't how.

my goal on device 480px image, not largest one. how accomplish this?

edit

or perhaps desires incorrect , browser doing should doing. explain why, when 480px wide image hanging off edge of screen, should still pick 1140px wide image.

answer/proof

as pointed out in answer below, the device doing should doing. prove point, here device (432 css pixels 1080 device pixels) displaying 480px , 1140px image. although 480px image matches css pixels, terribly blurry when compared 1140px image matches device pixels. so, device knows best , although expected pick smaller image, knew needed larger image (from responsive srcset , sizes) present image correctly.

480vs1140

the answer is: yes has device pixel ratio. , yes, device doing right.

the image shown correctly because if don't override image dimension css sizes attribute used (in case "100vw", ~"100%") (if change sizes "50vw" around "50%" width).

the key part there different concepts of pixels.

normal media queries (min-width, max-width...) measured in called layout pixels (also css pixels). these pixels abstraction of real physical pixels (device pixels) have satisfying , reliable pixel unit layout stuff (css) retina screens (and low resolution screens). using physical pixels layout pixels mean on small high resolution devices very, small layout objects. in css world pixel means layout pixel. calculated device pixel / device pixel ration.

however, in case of images how many pixels device has. if has 1000px pixels screen width , image displayed @ 100vw, makes sense load 1000 pixel width image satisfy full quality of screen. (= each physical screen pixel gets real image pixel assigned.)

this makes sense if these 1000 physical pixels measured in 360 layout pixels.

see also: a pixel not pixel.


Comments

Post a Comment

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

-
i have spring project , try make use spring boot , run @ embadded tomcat following : https://spring.io/guides/gs/rest-service/ this application //@configuration //@enableaspectjautoproxy @springbootapplication @componentscan(basepackages = "gux.prome") public class application { public static void main(string[] args) { springapplication.run(application.class, args); } } if use maven command: mvn spring-boot:run , project starts fine, need debug , run main method @ intelij, exception occurs: exception in thread "main" java.lang.illegalargumentexception: cannot instantiate interface org.springframework.context.applicationlistener : org.springframework.boot.logging.classpathloggingapplicationlistener @ org.springframework.boot.springapplication.createspringfactoriesinstances(springapplication.java:414) @ org.springframework.boot.springapplication.getspringfactoriesinstances(springapplication.java:394) @ org.springframework.bo...
Read more

reactjs - React router and this.props.children - how to pass state to this.props.children -

-
i'm using react-router first time , don't know how think in yet. here's how i'm loading components in nested routes. entry point .js reactdom.render( <router history={hashhistory} > <route path="/" component={app}> <route path="models" component={content}> </route> </router>, document.getelementbyid('app') ); app.js render: function() { return ( <div> <header /> {this.props.children} </div> ); } so child of app content component sent in. i'm using flux , app.js has state , listens changes, don't know how pass state down this.props.children. before using react-router app.js defines children explicitly, passing state natural don't see how now. using couple of react helper methods can add state, props , whatever else this.props.children render: function() { var children = react.ch...
Read more

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -

-
i have excel workbook used generate quotations customers. there main page user inputs data, , there buttons generate various pdfs , send them customer. however, 1 user consistently getting error preventing generating , sending pdfs. i beleive "microsoft windows common controls 6.0 (sp6)". it's installed on users' computers. on mine, location "c:\windows\syswow64\mscomctl.ocx" on others "c:\windows\system32\mscomctl.ocx" the user experiencing issues on 32-bit machine, "mscomctl.ocx" file should in system32. have manually put in there, , pointed common controls reference in vba it. issue seems keep reverting looking in syswow64. since folder doesn't exist, can't find it, , can't produce pdfs. i thought perhaps issue user running older version of office (2007) there users on 2013 , 2016. thought perhaps mixture of 64-bit , 32-bit users. user gets sent workbook other users (as quotation process goes further, gets passed ...
Read more