javascript 如何调整一个css按钮的大小，并保持内部图像适合？

yxyvkwin 于 2023-02-28 发布在 Java

关注(0)|答案(1)|浏览(135)

按钮代码：

document.querySelector('.btn').onclick = function() {
  this.classList.toggle('fullscreen');
}

body,
html {
  margin: 0;
  background-color: #3498db;
}

.btn {
  width: 64px;
  height: 64px;
  background-color: #e74c3c;
  position: absolute;
  top: 45px;
  right: 10px;
  margin-top: -32px;
  margin-left: -32px;
  box-shadow: 0 0 0 2px #fff;
  cursor: pointer;
  transition: all .2s ease-out;
}

.btn:active {
  background-color: #c0392b;
}

.part1,
.part2 {
  width: 32px;
  height: 32px;
  background-image: url(https://cdn0.iconfinder.com/data/icons/feather/96/591275-arrow-up-64.png);
  background-size: 32px;
  float: left;
  transition: all .2s ease-out;
}

.part1 {
  transform: rotate(-135deg);
  position: relative;
  top: 32px
}

.part2 {
  transform: rotate(45deg);
}

.btn.fullscreen {
  transform: scale(1.1);
}

.btn.fullscreen .part1 {
  transform: rotate(45deg);
}

.btn.fullscreen .part2 {
  transform: rotate(225deg);
}

<div class="btn">
  <div class="part1"></div>
  <div class="part2"></div>
</div>

如果我将按钮的宽度和高度更改为较小的值，例如更改为44，则结果为：（左边的按钮在他原来的大小64在右边后，改变大小为44）。
也许有一种方法可以添加一些变量类型int，如果我改变它，它会改变按钮大小，并会保持一切，而不是每次改变大小和其他事情？

JavaScript

来源：https://stackoverflow.com/questions/75585245/how-to-resize-a-css-button-and-keep-the-inner-image-to-fit

1条答案

按热度按时间

3npbholx1#

看起来您正在使用羽化图标并试图模仿maximize-2图标。
看一下这个例子，它使用了feather图标使用的SVG，但是使用了一些自定义CSS来设置样式，使其具有红色背景和白色边框：

window.addEventListener('load', () => {
    const changeFontSize = (difference) => {
    document.body.style.fontSize = (parseFloat(getComputedStyle(document.body).fontSize) + difference) + 'px';
    console.log(document.body.style.fontSize);
  };
    document.querySelector('#button-increase').addEventListener('click', e => {
    e.preventDefault();
    changeFontSize(1);
  }, false);
  document.querySelector('#button-decrease').addEventListener('click', e => {
    e.preventDefault();
    changeFontSize(-1);
  }, false);
}, false);

body {
  background-color: #ccc;
}

.red-box {
  background-color: red;
  border: 1px solid white;
  height: 1em;
  padding: 0.1em;
  width: 1em;
}

<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="red-box">
  <polyline points="15 3 21 3 21 9"></polyline>
  <polyline points="9 21 3 21 3 15"></polyline>
  <line x1="21" y1="3" x2="14" y2="10"></line>
  <line x1="3" y1="21" x2="10" y2="14"></line>
</svg>
<button type="button" id="button-increase">Increase Font Size</button>
<button type="button" id="button-decrease">Decrease Font Size</button>

这使得当尺寸改变时，图像尺寸也改变，同时保持适当的定位。

赞(0）回复(0）举报 2023-02-28

我来回答

javascript 如何调整一个css按钮的大小，并保持内部图像适合？

1条答案

相关问题

热门标签

最新问答