css scale with fixed border size?

Question

Is there any way of keeping border size fixed while scaling an object with 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 keep it at 1px?

Here is the FIDDLE

Answer 1

I believe you'd have to transition the width and height ( and whatever else you need ) instead of using scale .

.box {
  transition: 1s;
}

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

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

Answer 2

This problem could however be solved using CSS3 properties only. But, this would only be possible if you give a 'border-width' of '2px' at first and then change it to '1px' as you hover over it as 1px is the smallest unit value to render with.

.myObj { border: 2px solid red; }

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

Here goes the FIDDLE for better understanding.

Answer 3

Try this 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 4

Of course it is possible! I think the easiest way is to change your 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 bit of creativity you'll have the same effect with a thin border ;)

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

Answer 5

Im late to this answer, but I hope it helps.

When using css scale, dimensions also scale. You can override this using jQuery (or javascript if you will)

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

This is pure math
1/0.5 = 2
1 = 2(0.5)
1 = 1