具有固定边框大小的CSS比例？答案

【问题标题】：css scale with fixed border size?具有固定边框大小的CSS比例？
【发布时间】：2014-03-11 15:19:08
【问题描述】：

在使用 CSS 缩放对象时，有什么方法可以保持边框大小不变？

我有一个样式如下的对象

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

当我缩放这个对象时，这个对象的边框也会正常缩放。但是我怎样才能让它保持在 1px 呢？

这里是FIDDLE

【问题讨论】：

检查了元素 .. 在缩放版本中实际上是 1px .. 所以我猜你的要求不能用 scale 实现
感谢您的回答，但我必须使用 css 转换和 JavaScript。 Fiddle 只是为了显示问题的简单演示。HERE 是我实际脚本的一部分。
我的答案使用 jquery，为什么必须使用 css 转换？有什么原因吗？

标签： javascript jquery css

【解决方案1】：

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

.box {
  transition: 1s;
}

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

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

【讨论】：

重点是不要为宽度和高度属性设置动画，因为它们很昂贵
同意，但要求就是要求。

【解决方案2】：

不过，这个问题只能使用 CSS3 属性来解决。但是，这只有在您首先给出 '2px' 的 'border-width' 并在将鼠标悬停在其上时将其更改为 '1px' 时才有可能，因为 1px 是渲染的最小单位值。

.myObj { border: 2px solid red; }

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

这里是FIDDLE 以便更好地理解。

【讨论】：

【解决方案3】：

试试这个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.
});
});

【讨论】：

【解决方案4】：

当然可以！我认为最简单的方法是更改您的 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/

【讨论】：

这不是 CSS 比例，而是一种不使用比例的解决方法。

【解决方案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

【讨论】：

pd: css中渲染的最小边框尺寸为1px