缩放图像会影响目标图像周围的其他元素 [英] Scaling an image affects other elements around the targeted image

问题描述

基本上，我想要做的是在一行中有一组图像，每当我将鼠标悬停在其中一个图像应该放大，并得到一个红色边框。

Basically what I'm trying to do it to have a set of images in a row, and whenever I hover over one of them that image should be enlarged and get a red border.

我为此使用CSS转换。

I'm using CSS transitions for this.

我现在的问题是，当我将鼠标悬停在图像上时，所有周围的图像被压下

My problem right now is that when I hover over an image, all the surrounding images gets pushed down and a little bit to the side.

我注意到的一件事是，如果我删除边框过渡效果完美。

One thing I've noticed is that if I remove the border transition the effect works perfectly.

html部分很简单：

The html part is very simple:

<div id="Menu">
    <img src="img1" alt="" /> <img src="img2" alt="" /> <img src="img3" alt="" /> <img src="img4" alt="" /> <img src="img5" alt="" /> <img src="img6" alt="" /> <img src="img7" alt="" />
</div>

对于CSS：

#Menu {
    text-align:center;
    margin-top:20px;
}
#Menu img {
    position:relative;
    display:inline;
    border:none;
    transform:scale(1);
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    z-index:1;
    transition:transform .5s, border .5s;
    -webkit-transition:-webkit-transform .5s, border .5s;
    -moz-transition:-moz-transform .5s, border .5s;
}
#Menu img:hover {
    position:relative;
    display:inline;
    border: 3px #C00 solid;
    border-radius: 2px;
    transform:scale(1);
    -webkit-transform:scale(1.3);
    -moz-transform:scale(1);
    z-index:10;
    transition:transform .5s, border .5s;
    -webkit-transition:-webkit-transform .5s, border .5s;
    -moz-transition:-moz-transform .5s, border .5s;
}

问题是什么，如何解决？

What's the problem and how do I fix it?

这是一个JsFiddle示例。

推荐答案

您应该添加

#Menu img {
   border: 3px solid transparent;
}

说明：

如果您了解CSS盒模型架构

If you learn about CSS box-model architecture

边框占用元素周围的空间，而不是元素内部，因此当您在悬停时使用边框时，实际上会占用元素周围的空间并将其他元素放在一边，因此为了防止这种情况，我们使用透明颜色的边框欺骗那个地方。

Border takes up space around the element and not inside the element, so when you use the border on hover, it actually takes up space around the element and pushes other elements aside, and hence inorder to prevent that, we spoof up that place using border with a transparent color.

如果你想的话，你也可以使用新的CSS3属性，称为 box-sizing：border-box

If you want you can also use new CSS3 property, which is called box-sizing: border-box

完成跨浏览器

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 

这是做什么的？

边框，paddings等将被计入框内而不是计算外部，所以如果你不需要 transparent border

The borders, paddings etc will be counted inside the box instead of calculating outside, so you can also use these properties if you don't need transparent border

这篇关于缩放图像会影响目标图像周围的其他元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！