Hiển thị hình ảnh hiển thị võng mạc với css tinh khiết

Question

Tôi có một tình huống mà tôi không thể biết kích thước của hình ảnh (một giới hạn độc quyền ...)

Tôi cần tìm hiểu cách hiển thị cấp độ võng mạc hình ảnh, và tôi muốn làm như vậy mà không cần sử dụng javascript (nếu có thể).

Tôi đã sử dụng:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {} 

nhưng điều đó chỉ đã giúp tôi với các yếu tố có ảnh nền. Vì hình ảnh được đề cập không thể là hình nền (vì tôi không biết kích thước ...) cách nào để tìm ra hình ảnh này?

Tôi có logo.png và logo2x.png, và đánh dấu áp dụng của tôi trông giống như sau:

<h1 id="logo"> 
    <a href="/"> 
    <img src="images/logo.png"> 
    </a> 
</h1> 

Đây có phải là có thể mà không javascript? Tôi không chống lại bằng cách sử dụng css không chuẩn cho việc này - miễn là nó hoạt động với webkit (ios/iphone trong trường hợp này). Tôi muốn hiển thị logo.png cho các trình duyệt bình thường nhưng logo2x.png cho các trình duyệt với một tỷ lệ điểm ảnh của ít nhất 2.

Answer 1

Bạn có thể làm thủ thuật này: đầu ra tất cả hình ảnh và hiển thị hình ảnh chỉ phù hợp với từng thiết bị: đánh dấu

HTML : phong cách

<h1 id="logo"> 
    <a href="/"> 
    <img class="logo logo_normal" src="images/logo.png" /> 
    <img class="logo logo_retina" src="images/logo2x.png" /> 
    </a> 
</h1> 

CSS:

.logo_retina { display: none; } 

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

Ngoài ra bạn có thể sử dụng giải pháp ‘adaptive images’ này và đọc về adaptive images saga trên html5doctor

UPDATE:dabblet link

HTML:

<h1><a class="logo ir" href="/">BRAND</a></h1> 

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'); 
    } 
} 

Answer 2

Tự nghĩ về vấn đề này - cách sử dụng hình ảnh x2 và đảm bảo đặt kích thước pixel của hình ảnh? Retina hiển thị sẽ hiển thị nó 1: 1, và màn hình không võng mạc sẽ hiển thị nó ở mức 50%. Tất cả các khách hàng phải tải phiên bản x2 mặc dù, có nghĩa là lưu lượng truy cập nhiều hơn nữa.