CSS中如何實現(xiàn)等比例縮放

在CSS中，等比例縮放一個元素可以通過設(shè)置其寬度和高度屬性來實現(xiàn)，你需要確定元素的原始寬度和高度，然后按照你想要縮放的比例計算新的寬度和高度，使用CSS的過渡效果（transition）來平滑地改變元素的尺寸。

假設(shè)你有一個元素，其原始寬度為200px，高度為100px，你想要將其等比例縮放50%，那么新的寬度和高度應(yīng)該是100px和50px，你可以使用以下CSS代碼來實現(xiàn)：

.element {
  width: 200px;
  height: 100px;
  transition: width 2s, height 2s;
}
.element.scaled {
  width: 100px;
  height: 50px;
}

你可以使用JavaScript來觸發(fā)元素的縮放效果：

var element = document.querySelector('.element');
var scaleFactor = 0.5; // 縮放比例
var newWidth = element.offsetWidth * scaleFactor;
var newHeight = element.offsetHeight * scaleFactor;
element.style.width = newWidth + 'px';
element.style.height = newHeight + 'px';
element.classList.add('scaled'); // 添加scaled類來觸發(fā)縮放效果

上述代碼中的過渡效果時間（2s）可以根據(jù)你的需求進行調(diào)整，你也可以根據(jù)需要調(diào)整縮放比例（scaleFactor）。