My perfect Retina image code is not working. Hi rez image loading at full size

Here's the CSS for displaying my Retina optimized logo that I learned from this turtorial: http://net.tutsplus.com/tutorials/html-css-techniques/the-right-way-to-retinafy-your-websites/ But! When I test on my iPad and Samsung Galaxy Note II (safari, Firefox, Dolphin apps) the retina image is showing up at its full size, which is 1200px x 500px. So it is grabbing the right image, just not resizing it. I have scoured the web for clues, but cannot find any. About to give up on serving retina images for now. Any ideas? Big thanks!
/* CSS for devices with normal screens */ .logo-splash { height: 250px; background-size: 600px 250px; background: url(images/iaay_splash_logo.png) no-repeat center center; } @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .logo-splash { background-size: 600px 250px; height: 250px; background: url(images/iaay_splash_logo@2x.png) no-repeat center center; } }

以上就是My perfect Retina image code is not working. Hi rez image loading at full size的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏