Javascript 固定边框大小的css缩放？

在使用CSS缩放对象时，有没有办法保持边框大小不变

我有一个样式如下的对象

.myObj{
   width:100px;
   height:100px;
   border:1px solid red
}

当我缩放此对象时，此对象的边界也会像正常情况一样缩放。但如何将其保持在1px

---

这是

我认为您必须转换宽度和高度（以及您需要的任何其他内容），而不是使用

比例

.box {
  transition: 1s;
}

.box:hover {
  width: 200px;
  height: 200px;
}

---

但是，仅使用CSS3属性就可以解决此问题。 但是，只有先将“边框宽度”设置为“2px”，然后将其更改为“1px”，因为1px是要渲染的最小单位值

.myObj { border: 2px solid red; }

.myObj:hover { border: 1px solid red; }

---

为了更好的理解，这里有了新的方法。

当然有可能！我认为最简单的方法是更改jQuery代码并使用.animate函数而不是.transition函数：

$(".box").hover( function () {
    $('.box').animate({height: 300, width: 300, marginLeft: '-=' + (300-75) / 2, marginTop: '-=' + (300-75) / 2});
}, function () {
    $('.box').animate({height: 75, width: 75, marginLeft: '20%', marginTop: '20%'});
});

只要有一点创意，你就可以用薄薄的边框获得同样的效果；）

试试这个

---

我回答这个问题迟到了，但我希望它能有所帮助

使用css缩放时，尺寸也会缩放。您可以使用jQuery（或者javascript，如果您愿意的话）覆盖它

这是纯数学
1/0.5=2
1=2（0.5）

---

1=1

检查了元件。。在缩放版本中，这实际上是1px。。所以我猜您的需求不能用scaleThank实现，但我必须使用css转换和JavaScript。Fiddle只是为了一个简单的演示来说明问题。是我实际脚本的一部分。我的答案是使用jquery，为什么必须使用css转换？有什么原因吗？Pd：css中呈现的最小边框大小是1pX，这不是css比例，但是一个不使用比例的解决方法。重点不是设置宽度和高度属性的动画，因为它们很昂贵，但是一个要求就是一个要求。

$(".box").hover( function () {
    $( ".box" ).animate({
         width: "300px",
height: "300px"
}, 100, function() {
// Animation complete.
});

}, function () {
    $( ".box" ).animate({
         width: "75px",
height: "75px"
}, 100, function() {
// Animation complete.
});
});

var scale = 0.5, /*value of your scale, as in transform: scale(0.5)*/
  absoluteSize = 1/scale + "px" 
  //absoluteSize = 1/0.5px = 2px
$(".box").css("border", absoluteSize);