CSS如何在固定边框大小的情况下进行缩放？

Question

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

我有一个带有以下样式的对象

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

当我缩放这个对象时，该对象的边框也会按正常比例缩放。但是如何将其保持在1像素？

这里是FIDDLE。

- effe

---

检查了元素，发现在缩放版本中实际上是1像素，所以我猜你的要求无法使用缩放实现。 - A J

谢谢你的回答，但我必须使用CSS转换和JavaScript。 Fiddle只是为了简单演示问题。这里是我的实际脚本的一部分。 - effe

我的答案使用了jQuery，为什么必须使用CSS转换？有什么原因吗？ - A J

Answer 1

我相信你需要过渡宽度、高度（以及其他你所需的内容），而不是使用 scale。

.box {
  transition: 1s;
}

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

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

- Bill Criswell

---

整个重点在于不要动画化宽度和高度属性，因为它们很耗费资源。 - apieceofbart

同意，但需求就是需求。 - Bill Criswell

Answer 2

这个问题可以仅使用CSS3属性来解决。 但是，只有在您首先给出“2px”的“border-width”，然后在悬停时将其更改为“1px”，才能实现这一点，因为1px是最小的渲染单位值。

.myObj { border: 2px solid red; }

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

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

- Abhi

Answer 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.
});
});

- A J

Answer 4

我回答晚了，但希望能有所帮助。

使用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

- edvilme

---

注意：CSS 中边框的最小渲染大小为 1px。 - edvilme

Answer 5

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

稍微动动脑筋，你就能用细边框达到同样的效果；）

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

- dejakob

---

那不是CSS的比例尺，而是避免使用比例尺的解决方法。 - Jorge Fuentes González