javascript - Html: load convenient image size at page loading time? -


i have image in gridview (table) has various number of columns according screen resolution. html code this:

as can see, have 6 columns on 'ld' resolutions ; 4 column on 'md' resolution ; etc...

at end, actual/displayed resolution of image image_resolution_xxx.jpg not known in advance. depends on screen resolution of device (and consequently of number of columns of grid).

my images stored on server in different folders according resolution : folder '128x128', '256x256', etc...

what want avoid load big resolution images in gridview (ex: image_resolution_512.jpg) if smaller resolution required (ex: image_resolution_256.jpg). also, want avoid load small resolution image if higher resolution required.

how can load correct resolution @ loading time ?

perhaps simplified way define image resolution of xxx pixels xs devices , of yyy pixels md devices, etc... possible ?

thanks !

you along lines of...

<link rel="stylesheet" media="screen , (-webkit-device-pixel-ratio: 0.75)" href="css/ldpi.css" /> <link rel="stylesheet" media="screen , (-webkit-device-pixel-ratio: 1.0)" href="css/mdpi.css" /> <link rel="stylesheet" media="screen , (-webkit-device-pixel-ratio: 1.5)" href="css/hdpi.css" /> <link rel="stylesheet" media="screen , (-webkit-device-pixel-ratio: 2.0)" href="css/retina.css" /> 

and manage images want show in image container via each different css file?


Comments

Popular posts from this blog

php - Invalid Cofiguration - yii\base\InvalidConfigException - Yii2 -

How to show in django cms breadcrumbs full path? -

ruby on rails - npm error: tunneling socket could not be established, cause=connect ETIMEDOUT -