Css scale with fixed border size?

Question

Is it possible to keep a fixed border size when scaling an object using CSS?

I have an object with style below

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

when I scale this object, the border of this object also scales as normal. But how can I save it at 1px?

Here is FIDDLE

Answer 1

Of course it is possible! I think the easiest way is to change the jQuery code and use the .animate function instead of the .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%'});
});

With a little creativity you get the same effect with a thin border;)

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

Answer 2

, ( , ) scale.

.box {
  transition: 1s;
}

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

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

Answer 3

CSS3. , " " "2px", "1px", , 1px - .

.myObj { border: 2px solid red; }

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

FIDDLE.

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