Как заставить фоновое изображение сжиматься пропорционально размеру кнопки в javascript? - PullRequest
Новая
       0

Как заставить фоновое изображение сжиматься пропорционально размеру кнопки в javascript?

24 голосов
/ 01 марта 2012

Я делаю шахматную доску в javascript.Квадраты (кнопки) на шахматной доске изначально были рассчитаны на 60 на 60 пикселей, но теперь они 40 на 40 пикселей.

    button 
    {
      width:40px; 
      height:40px; 
      border: 0
    }

Однако, некоторые фигуры, которые были разработаны для этой более ранней шахматной доски, все еще имеют размеры 60 на 60 пикселей.Есть ли способ в Javascript, чтобы сделать изображения пропорционально уменьшенными, чтобы соответствовать размеру квадрата?В настоящее время изображения соответствуют размеру квадрата, но не сжимаются, поэтому, когда я говорю, 

    square.style.backgroundImage = imgLink; // square is the button, imgLink is "WhiteKing.jpg" for example.

, я получаю такие фрагменты -

enter image description here

ЕслиWhiteKing.jpg сократился пропорционально, он бы хорошо подошел.Есть ли способ сделать это в Javascript?Любая помощь могла бы быть полезна.

Ответы [ 4 ]

36 голосов
/ 01 марта 2012

Большинство современных браузеров поддерживают CSS опции фонового изображения как background-size, поэтому вы действительно можете использовать что-то вроде этого: 

button{
  width:40px; 
  height:40px; 
  border: 0;
  background-size: 100%; /* To fill the dimensions of container (button), or */
  background-size: 40px auto; /* to specify dimensions explicitly */
}

Конечно, вы можете использовать это и в JavaScript (но лучше добавить его в уже существующий CSS для кнопки): 

square.style.backgroundSize = '100%';
3 голосов
/ 01 марта 2012

Вы собираетесь использовать: Background-size: 100%;

2 голосов
/ 01 марта 2012

Существуют разные варианты, как это сделать, но если бы это был я, я бы физически изменил размеры реальных файлов изображений, чтобы обеспечить оптимальный контроль над качеством изображения. Если файлов много, и это может занять много времени в Photoshop (или любом другом редакторе изображений, который вы используете), тогда используйте свой любимый язык сценариев в сочетании с чем-то вроде ImageMagick и позвольте компьютеру делать то, что нужно это лучше всего;)

CSS

Используйте CSS3 background-size, как упомянуто Juicy Scripter. Обратите внимание, что background-size, однако, является более новым атрибутом CSS, который не будет работать в старых браузерах (например,

HTML

Загрузите изображение шахматной фигуры с фактическим тегом img и измените ширину этого HTML-элемента (недостатком является то, что это, вероятно, приведет к перекомпоновкам, которые могут замедлить рендеринг страницы или вызвать мерцание или другие нежелательные странности). Вам, вероятно, потребуется использовать различные методы позиционирования (например, position, z-index и т. Д.) В зависимости от вашей реализации.

Руководство

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

0 голосов
/ 01 марта 2012

Возможно, попробуйте добавить position:relative и background-color:transparent к стилю кнопки, затем используйте div внутри тега кнопки, задав для top и left значение 0px. Внутри этого div, пожалуйста, тег для графического кнопки со стилем, установленным на новую ширину / высоту (40px).

Не нужно использовать абсолютную позицию для графики, если вы не хотите помещать что-либо поверх нее. Если вы это сделаете, используйте z-index на элементе div, чтобы переместить его за любой текст и т. Д. *

Давай. Надеюсь, что это работает! : D

...