В этой статье http://css-tricks.com/css-sprites/ , рассказывается о том, как я могу обрезать меньшее изображение из одного большего изображения. Можете ли вы сказать мне, если это возможно / как я могу обрезать уменьшенное изображение, а затем масштабировать обрезанную область, прежде чем выложить ее?
Вот пример из этой статьи:
A
{
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png);
background-position: -10px -56px;
}
Я хотел бы знать, как я могу масштабировать это изображение после того, как я обрезал его из spriteme1.png
Вот URL примера: http://css-tricks.com/examples/CSS-Sprites/Example1After/
Итак, я хотел бы знать, могу ли я сделать значки рядом с Item1,2,3,4 меньше?
css
css-sprites
Майкл
источник
источник
Ответы:
Вы можете использовать background-size , так как он поддерживается большинством браузеров (но не всеми http://caniuse.com/#search=background-size )
Или
Вы можете использовать комбо масштабирования для webkit / ie и transform: scale для Firefox (-moz-) и Opera (-o-) для кросс-браузерного рабочего стола и мобильного
источник
Когда вы используете спрайты, вы ограничены размерами изображения в спрайте. Свойство
background-size
CSS, упомянутое Стивеном, пока не получило широкой поддержки и может вызвать проблемы с браузерами, такими как IE8 и ниже, и, учитывая их долю на рынке, это нереальный вариант.Другой способ решить проблему - использовать два элемента и масштабировать спрайт, используя его с
img
тегом, например так:Таким образом, внешний элемент (
div.sprite-image
) обрезает изображение 20x20px изimg
тега, которое действует как масштабированноеbackground-image
.источник
src
по css.<img>
должен использоваться только если он является частью контента. в целях дизайна, фоновые изображения являются обязательными.Попробуйте это: Stretchy Sprites - кросс-браузер, адаптивное изменение размера / растяжение изображений спрайтов CSS
Этот метод масштабирует спрайты «быстро» так, чтобы ширина / высота изменялась в соответствии с размером окна вашего браузера. Он не использует,
background-size
поскольку поддержка этого в старых браузерах отсутствует.CSS
HTML
источник
transform: scale();
заставит оригинальный элемент сохранить его размер.Я нашел лучший вариант, чтобы использовать
vw
. Это работает как шарм:https://jsfiddle.net/tomekmularczyk/6ebv9Lxw/1/
источник
Вот что я сделал, чтобы сделать это. Имейте в виду, что он не будет работать на IE8 и ниже.
Ширина фонового изображения будет уменьшаться по мере уменьшения родительского
#element
размера. Вы можете сделать то же самое с его высотой, если вы пересчитаетеheight
в процентах. Единственный сложный момент - вычислить проценты дляbackground-position
.Первый процент - это ширина целевой области спрайта при нормальной ширине, деленная на общую ширину спрайта и умноженная на 100.
Второй процент - это высота целевой области спрайта перед масштабированием, деленная на общую высоту спрайта и умноженная на 100.
Формулировка этих двух уравнений немного неаккуратна, поэтому дайте мне знать, если вам понадобится, чтобы я объяснил это лучше.
источник
Кажется, это работает для меня.
Если спрайты находятся в сетке, установите
background-size
значение 100% для количества спрайтов и на 100% для количества спрайтов. Тогда используйтеbackground-position -<x*100>% -<y*100>%
где x и y - спрайт на основе нуляДругими словами, если вы хотите, чтобы 3-й спрайт слева и 2-й ряд был 2 над и 1 вниз, так
Например вот спрайт лист 4х2 спрайтов
И вот пример
Если спрайты имеют разные размеры, вам нужно установить
background-size
для каждого спрайта значение a, чтобы ширина этого спрайта составляла 100%.Другими словами, если изображение имеет ширину 640 пикселей и спрайт внутри этого изображения имеет ширину 45 пикселей, то для получения 45 пикселей будет 640 пикселей
Затем вам нужно установить смещение. Сложность смещения заключается в том, что 0% выравнивается по левому краю, а 100% - по правому.
Будучи графическим программистом, я ожидал бы, что смещение в 100% переместит фон на 100% по всему элементу, другими словами, полностью с правой стороны, но это не то, что означает 100% при использовании с
backgrouhnd-position
.background-position: 100%;
означает выравнивание по правому краю. Таким образом, форум для принятия этого во внимание после масштабированияПредположим, что смещение составляет 31 пикселей
Вот изображение 640x480 с 2 спрайтами.
После математики выше для спрайта 1
источник
Старый пост, но вот что я сделал, используя
background-size:cover;
(подсказка @Ceylan Pamir) ...ПРИМЕР ИСПОЛЬЗОВАНИЯ
Горизонтальный круговой флиппер (наведите курсор на изображение на лицевой стороне, переворачивает назад с другим изображением).
ПРИМЕР СПРАЙТ
480px x 240px
ПРИМЕР ФИНАЛЬНЫЙ РАЗМЕР
Одиночное изображение @ 120px x 120px
ОБЩИЙ КОД
.front {width:120px; height:120px; background:url(http://www.example.com/images/image_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:0px 0px;}
.back {width:120px; height:120px; background:url(http://www.example.com/images/image_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:-120px 0px;}
СОКРАЩЕННАЯ ДЕЛО FIDDLE
http://jsfiddle.net/zuhloobie/133esq63/2/
источник
попробуйте использовать размер фона: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm
Что-то мешает вам рендерить изображения в нужном вам размере?
источник
background-size
это CSS 3 и еще не поддерживается широко.Мне потребовалось время, чтобы найти решение этой проблемы, которой я был доволен:
Проблема:
SVG спрайт иконок - скажем, 80px x 3200px
Мы хотим масштабировать каждое их использование в селекторах контента (: before /: after) в разных местах по разным размерам без переопределения ко-ордов каждого спрайта в зависимости от используемого размера.
Таким образом, это решение позволяет вам использовать те же спрайты в
<button>
качестве<menuitem>
то же время масштабируя его.Используя проценты (до 2 десятичных разрядов) в background-position, а не background-size, как предлагают другие здесь, вы можете масштабировать одно и то же объявление значка до любого размера, без необходимости повторно его объявлять.
Процент позиции-y - это исходная высота спрайта / высота иконки в виде% - в нашем случае здесь 80px * 100 / 3200px == каждый спрайт представлен y-позицией 2,5%.
Если у вас есть состояния наведения / наведения мыши, вы можете удвоить ширину спрайта и указать координату position-x.
Недостаток этого подхода состоит в том, что добавление большего количества значков на более позднем этапе изменит высоту спрайта и, следовательно, y-position%, но если вы этого не сделаете, ваши координаты спрайта будут нуждаться в изменении для каждого требуемого масштабированного разрешения.
источник
Ну, я думаю, что нашел более простое решение для масштабирования изображений: пример - допустим, есть изображение с 3 одинаковыми по размеру спрайтами, которые вы хотели бы использовать, используйте CSS для масштабирования изображения
а затем укажите настраиваемую высоту и ширину, которые необходимо применить к вашему HTML-элементу, например:
Пример кода будет выглядеть примерно так:
я довольно новичок в css, и стилизация - это не моя лучшая область, это может быть неправильный способ сделать это ... но он работал для меня в Firefox / Chrome / Explorer 10, надеюсь, он работает и в более старых версиях ..
источник
Используйте
transform: scale(...);
и добавьте соответствие,margin: -...px
чтобы компенсировать свободное пространство от масштабирования. (вы можете использовать,* {outline: 1px solid}
чтобы увидеть границы элементов).источник
2018 здесь. Используйте background-size с процентом.
ПРОСТЫНЬ:
Это предполагает один ряд спрайтов. Ширина вашего листа должна быть числом, которое делится на 100 + ширину одного спрайта . Если у вас есть 30 спрайтов размером 108x108 пикселей, добавьте дополнительное пустое пространство в конец, чтобы получить окончательную ширину 5508 пикселей (50 * 108 + 108).
CSS:
HTML:
источник
Используйте
transform: scale(0.8);
с нужным вам значением вместо 0,8источник
Установите ширину и высоту для элемента-обертки изображения спрайта. Используйте эту CSS.
источник
Легко ... Использование двух копий одного и того же изображения с разным масштабом на листе спрайта. Установите координаты и размер в логике приложения.
источник