CSS3 border-image and Retina screens -


my question pretty simple, there way (or hack) make 'border-image' property support retina (high definition) displays? @ least in webkit-based browsers. if try use high resolution image in border-image, appears larger, , found no way of scaling down. if set smaller border width and/or slice size, (naturally) crop image, not scale down. know simulate border backgrounds, in question more interested know if there's way use 'border-image'. thank in advance!

this example:

<style> .border-button {   border: 20px solid transparent;   border-image: url(button-border.png) 20 20 repeat; } @media screen , (-webkit-min-device-pixel-ratio: 2) {   .border-button {     border: 10px solid transparent;     border-image: url(button-border@2x.png) 10 10 repeat;   } } </style> 

this silly of me, haven't tried setting 'border-width' half size of border image slice. scales image down fine, , correct answer. apologise posting question obvious, perhaps others don't see obvious in front of them, me :)


Comments

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -