Как заставить фоновое изображение уменьшаться пропорционально размеру кнопки в 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? Любая помощь могла бы быть полезна.
2 ответа
Большинство современных браузеров поддерживают 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%';
Есть разные варианты, как это сделать, но если бы это был я, я бы физически изменил размер реальных файлов изображений, чтобы обеспечить оптимальный контроль над качеством изображения. Если файлов много, и это может занять много времени в Photoshop (или любом другом редакторе изображений, который вы используете), тогда используйте свой любимый язык сценариев в сочетании с чем-то вроде ImageMagick и позвольте компьютеру делать то, что нужно. это лучше всего;)
CSS
Используйте CSS3 background-size, как упомянуто Juicy Scripter. Обратите внимание, что background-size, однако, является новым атрибутом CSS, который не будет работать в старых браузерах (например, < IE 8) и может требовать префиксов поставщиков в других браузерах.
HTML
Загрузите изображение шахматной фигуры с фактическим тегом img и измените ширину этого HTML-элемента (недостатком является то, что это, вероятно, приведет к перекомпоновке это может замедлить рендеринг страницы или вызвать мерцание или другие нежелательные странности). Вероятно, вам придется использовать разные методы позиционирования (например, position, z-index и т. Д.) В зависимости от вашей реализации.
Manual
Просто сделайте изображения физически меньше. Я думаю, что, в конце концов, это лучший (хотя и самый трудоемкий) вариант, поскольку он позволит вам сохранить максимальный контроль над качеством изображений. Различные браузеры могут непредсказуемо изменять размеры изображений по-разному (в зависимости от того, как они обрабатывают изменение размера), тогда как, если вы изменяете их размер самостоятельно, вы гарантированно представляете изображения в соответствии с вашими намерениями.