Запретить масштабирование изображений с помощью браузера - PullRequest
Новая
       54

Запретить масштабирование изображений с помощью браузера

5 голосов
/ 11 марта 2011

У меня есть одно изображение с кнопками, выровненными по вертикали.Затем я использую CSS, который задает «background-position», чтобы показать правильную кнопку в зависимости от класса кнопки.У меня возникает проблема, когда пользователь нажимает «cmd +» (или увеличивает масштаб своего браузера), изображение «становится больше», и вы начинаете видеть другие кнопки (разных цветов).Как я могу оставить фон «фиксированным», чтобы он не увеличивался в браузере.

Заранее спасибо!

Вот CSS: https://gist.github.com/b5d52ab2a2f84ed82fb4

ИПредварительный просмотр: НОРМАЛЬНЫЙ: cl.ly/3d3y2D3c0D0A2T1n0f0G и ZOOOMED: cl.ly/1K2t450p2m3B2x133j04

Как ни странно, эффект только кажется, что появляется в Safari (я тестировал Chrome, Safari и Firefox) *

Ответы [ 3 ]

0 голосов
/ 11 марта 2011

Кажется, у вас проблема с кровотечением у css-спрайтов.
Это не так легко решить, так как не все браузеры увеличивают изображение одинаково.

Один из обходных путей - встраивание текста в саму кнопку, это не позволит браузеру увеличивать текст больше, чем кнопка. Но этот вид поражает цель css-спрайтов ..

Другим обходным решением является создание текста в виде изображения с использованием сценария PHP, а затем добавление его перед кнопкой. Это предотвратит масштабирование при сохранении гибкости вашей текущей системы.

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

0 голосов
/ 25 марта 2011

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

Вы можете попробовать установить px значения, и если это не сработает, попробуйте em, так как это измерение относительно размера вашего базового шрифта.

В качестве альтернативы, вы можете использовать CSS3 вместо фоновых изображений и просто позволить IE иметь квадратные углы. 

-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background: url(sweet-gradient.png) top left no-repeat;
0 голосов
/ 11 марта 2011


Вы просто забыли записать все необходимые параметры в атрибуте background-position: в css ..

Чтение CSS Sprite

Также прочитано

...