Question

使用CSS缩放对象时，有没有办法保持边框大小固定？

我有一个风格低于

的对象

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

当我缩放此对象时，此对象的边框也会正常缩放。但是如何将其保持为1px？

以下是FIDDLE

Answer 1

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

.box {
  transition: 1s;
}

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

http://jsfiddle.net/GJJp4/65/

Answer 2

但是，仅使用CSS3属性可以解决此问题。但是，只有在你给出一个边界宽度的情况下才能做到这一点。＆＃39; 2px＆＃39;首先，然后将其更改为＆＃39; 1px＆＃39;当你将鼠标悬停在它上面时，1px是要渲染的最小单位值。

.myObj { border: 2px solid red; }

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

为了更好地理解，FIDDLE出现了。

Answer 3

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

$(".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%'});
});

通过一点点创造力，您可以使用细边框获得相同的效果;）

http://jsfiddle.net/GJJp4/71/

Answer 4

试试这个fiddle

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

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

Answer 5

我迟到了这个答案，但我希望它有所帮助。

当使用css刻度时，尺寸也可以缩放。您可以使用jQuery（或javascript，如果你愿意）覆盖它

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);

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

固定边框尺寸的css比例？

5 个答案: