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

Я делаю шахматную доску в 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.

Я получаю такие штуки -

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

Ответ 1

Большинство современных браузеров поддерживают 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%';

Ответ 2

Ваше желание использовать: Фоновый размер: 100%;

Ответ 3

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

CSS

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

HTML

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

Руководство

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

Ответ 4

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

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

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