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
Post a Comment