Есть 2 css-спрайта:
- Под обычные дисплеи — https://i.stack.imgur.com/TxPnI.png (10×23 px)
- Под retina дисплеи — https://i.stack.imgur.com/6Hu80.png (30×48 px)
Нужно иконки из спрайта №2 сузить с 30px до 10px, чтобы на retina дисплеях смотрелось чётко. Но не получается.
На обычных дисплеях выглядит всё отлично (скринил с мака, поэтому размыто):
На retina-экранах дисплеях выглядит неправильно (иконка «+» обрезается и снизу появляется иконка «-», хотя background-position указаны верно):
.common_icons { display: inline-block; background: url('https://i.stack.imgur.com/TxPnI.png') no-repeat; } .common_icons.white.plus { background-position: 0 -5px; width: 10px; height: 10px; } .common_icons.white.minus { background-position: 0 -20px; width: 10px; height: 3px; } @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), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) { .common_icons { background-image: url('https://i.stack.imgur.com/6Hu80.png'); background-size: 10px; } .common_icons.white.plus { background-position: 0 -5px; } .common_icons.white.minus { background-position: 0 -40px; } } .button_wrap { display: table; width: 30px; height: 30px; background: #65d1e0; font-size: 0; cursor: pointer; } .button_wrap .button { display: table-cell; vertical-align: middle; text-align: center }<div class="button_wrap"> <div class="button"> <div class="common_icons white plus"></div> </div> </div>https://jsfiddle.net/v7xtsd3n/
