спрайты CSS с высоким разрешением

Я создаю спрайты CSS. Я хочу использовать эти спрайты разных размеров. Я искал, но не смог понять, как функционально масштабировать спрайт CSS - например. если исходный спрайт имеет размер 150x150, а я хочу отобразить его с размером 50x50, как мне это сделать? background-size кажется, ломает его.

Я могу просто генерировать спрайты нужных размеров, но когда я делаю это с помощью -resize ImageMagick, я получаю заметное снижение разрешения. Обычно, если я обнаруживаю, что изображение имеет неприемлемо низкое разрешение на веб-странице, я просто увеличиваю изображение и масштабирую его размер, функционально увеличивая разрешение изображения.

Поскольку я не могу понять, как масштабировать спрайт CSS, я немного застрял - как я могу добиться произвольного разрешения с помощью спрайта CSS?


image html css image-processing css-sprites
person aresnick    schedule 20.01.2012    source источник
comment
Я думаю, что это больше связано с качеством изменения размера ImageMagick, чем с CSS.   -  person Diodeus - James MacFarlane    schedule 21.01.2012
comment
@Diodeus Несправедливо обвинять ImageMagick. Если вы не используете векторную графику, вы не сможете получить идеальное качество масштабирования с произвольным разрешением из любого программного обеспечения.   -  person koan    schedule 21.01.2012
comment
Обычно вы начинаете с более высокого разрешения, а затем делаете версии с более низким разрешением. Если IM не может сделать это хорошо, то это дерьмо.   -  person Diodeus - James MacFarlane    schedule 21.01.2012
comment
Если у вас есть изображение размером 50 x 50, а затем вы измените его размер до 48 x 48, что-то должно где-то уступить. Какое программное обеспечение вы используете?   -  person koan    schedule 21.01.2012
comment
Я использую ImageMagick, и кажется, что resample должен делать то, что я хочу, но я не смог понять, как это работает. Учитывая, что у меня есть большое изображение, кажется, что получить изображение меньшего размера с более высоким разрешением вполне возможно. Но мне непонятно как.   -  person aresnick    schedule 21.01.2012

Ответы (3)


arrow_upward
3
arrow_downward

Самый элегантный способ сделать это — использовать CSS3 background-size, но он поддерживается не во всех браузерах (например, IE‹=8). Вы можете просмотреть конкретные преобразования или фильтры IE, которые вы можете использовать, а затем добавить селекторы -mz-, -webkit- и -o-, чтобы получить желаемый эффект в браузерах, на которые вы ориентируетесь.

Наименее элегантный способ сделать это — имитировать масштаб и положение спрайта.

HTML

<div class="ex3">
    <img src="http://www.placekitten.com/g/600/400"/>
</div>

CSS

.ex3 {
    position: relative;
    overflow: hidden;
    width: 50px;
    height: 50px;  
}
.ex3 img {
    position: absolute;
    top: -25px;
    left: -25px; 
    width: 150px;  /* Scaled down from 600px */
    height: 100px;  /* Scaled down from 400px */
}

Скрипка

http://jsfiddle.net/brettwp/s2dfT/

person Brett Pontarelli    schedule 20.01.2012

arrow_upward
0
arrow_downward

Я не знаю, как изменить размер спрайта CSS, извините.

Что касается создания спрайтов CSS, попробуйте: http://spriteme.org/

Или для общего редактирования изображений: http://www.gimp.org/

Вы можете отредактировать отдельные компоненты изображения, а затем использовать SpriteMe для создания Sprite. Вы не хотите генерировать спрайт, а затем изменять размер всего изображения спрайта, так как тогда ваши позиции CSS для каждого отдельного элемента будут сброшены.

person Chad Schultz    schedule 20.01.2012

arrow_upward
0
arrow_downward

Я вижу следующие варианты:

  1. Либо иметь содержимое спрайта разных размеров в одном спрайте.

  2. Или возьмите исходный спрайт и один раз вручную измените его размер, чтобы создать его уменьшенную копию. Затем укажите меньшую версию спрайта, когда вам понадобятся изображения меньшего размера.

person NightHawk    schedule 20.01.2012