Showing retina display image with pure css

后端 未结 2 2033
滥情空心
滥情空心 2021-01-13 07:43

I have a situation where I can\'t possibly know the dimensions of an image (a proprietary limited cms...)

I need to figure out how to show a retina level image, and

2条回答
  •  不思量自难忘°
    2021-01-13 07:54

    You can do this trick: output all images and show only relevant images to each device:

    HTML markup:

    CSS styles:

    .logo_retina { display: none; }
    
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        .logo_normal { display: none; }
        .logo_retina { display: block; }
    }
    

    Also you can use this ‘adaptive images’ solution and read about adaptive images saga on html5doctor

    UPDATE: dabblet link

    HTML:

    CSS:

    #logo a {
        display: block;
        width: 200px;
        height: 200px;
        background: url('//placekitten.com/200');
    }
    
    @media  (-webkit-min-device-pixel-ratio:1.5),
            (min--moz-device-pixel-ratio:1.5),
            (-o-min-device-pixel-ratio:3/2),
            (min-resolution:1.5dppx) {
        #logo a {
            background: url('//placekitten.com/400');
        }
    }
    

自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题